Search code examples
javascriptjsonchartshighchartstimeserieschart

highchart x axis not showing correct date labels


i am using highchart and loading a json dynamically. json provides me the date time series and its value

The chart is being created and the tooltip is showing the correct value only the x-axis labels are not shown correctly.

  $(function () {
        $('#container').highcharts({
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e of %b'
                }
            },

            series: [{
                data: [
["2013-09-15 08:44:37",19.8],
["2013-09-18 08:47:37",18.4],
["2013-09-19 08:50:37",18.3],
["2013-09-20 08:53:37",18.1]
    ],
                //pointStart: Date.UTC(2010, 0, 1),
                pointInterval: 24 * 3600 * 1000 // one day
            }]
        });
    });

live plunkr : http://plnkr.co/edit/TfcJVPpqu6ZM2LywKmO5?p=preview

Kindly assist. Thanks

EDIT

I have updated the post and the plunkr with the correct dates


Solution

  • Try putting the dates as getTime (milliseconds) format:

    [new Date("2013-09-15T08:44:37").getTime(),19.8],
    [new Date("2013-09-18T08:47:37").getTime(),18.4],
    [new Date("2013-09-19T08:50:37").getTime(),18.3],
    [new Date("2013-09-20T08:53:37").getTime(),18.1]
    

    As in this plunker.