Jquery – Highchart – line or area not starting at the left point


Hi i am doing the graph using Highchart. it works fine. i got this issue:

i given the categories as months. while the line start (line/area) it is starting center of the month, not in the left of the month point, so in the October month the line start at the center, as well last month end withing center point, not ending with end of the graph. but my client want it to be start and end with appropriate months. i adding the jsfiddle for your reference:



Best Solution

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/

Related Question