[Solved]-Highchart - line or area not starting at the left point-Highcharts

You need to change the tickmarkPlacement option to 'on'.

 xAxis:[{
        categories:categories,
        title:{text:null},
        gridLineWidth: 1,
        verticalAlign:'top',
        lineWidth:0,
        offset:-400,
        minPadding:0,
        maxPadding:0,
        margin:[0,0,0,0],
        tickmarkPlacement:'on'
    }],

Have a look at How to get Highcharts X-Axis Categories starting at the left most point.

In few words - when you set xAxis.Categories, xAxis becomes 'string' instead of 'numeric'. So all ticks settings (startOnTick, endOnTick...) don't work with it. Good trick is to override xAxis.labels formatter:

var xCategories = ['1990','1991','1992','1993','1994','1995','1996','1997','1998'];

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
        },
        xAxis: {
            labels: {
                formatter: function() {
                    return xCategories[this.value];
                }
            },

            startOnTick: false,
            endOnTick: false,
            minPadding: 0,
            maxPadding: 0,

            gridLineWidth: 1
        },
        series: [{
            data: [2000,9001,1337,100,1000,4444,8888,1844,6780]
        }]
    });

See example: http://jsfiddle.net/vnJLG/