Misalignment at high-end date and time points with xaxis

Here is a scenario for my problem: http://jsfiddle.net/v0bxdqa7/5/

As you can see, the point is not aligned with the xaxis value.

I have come to the conclusion that from the examples shown on the highcharts website, the problem is with my data, but I cannot find the exact problem with it.

Any ideas?

My parameters:

     rangeSelector: {
        inputEnabled: false,
        selected: 1,
        buttons: [{
            type: 'day',
            count: 7,
            text: '7'
        }, {
            type: 'day',
            count: 30,
            text: '30'
        }, {
            type: 'year',
            count: 1,
            text: '365'
        }, {
            type: 'ytd',
            text: 'year'
        }]
    },
    tooltip: {
        headerFormat: '<small style="color: #666680">{point.key}</small><br>',
        pointFormat: '<span style="color: #acacbf">{series.name}: </span>' +
        '<span style="color: #666680"><b>{point.y}</b></span>'
    },
    xAxis: {
        lineColor: '#ebebeb',
        type: 'datetime',
        labels: {
            style: {
                color: '#acacbf'
            },
            align: "center",
            maxStaggerLines: 1,
            overflow: false
        }
    },
    yAxis: {
        allowDecimals: false,
        gridLineWidth: 0,
        labels: {
            enabled: false,
            style: {
                color: '#acacbf'
            }
        },
        min: 0,
        floor: 0,
        minRange:1
    },
    navigator: {enabled: false},
    chart: {
        className: "line-chart",
        backgroundColor: "#f7f7f7",
        margin:[10,5,22,5]
    },
    plotOptions: {
        series: {
            marker: {
                enabled: true,
                states: {
                    hover: {
                        radius: 5
                    },
                    select: {
                        enabled: true,
                        radius: 5,
                        fillColor: '#ffffff',
                        lineColor: '#ad49a5'
                    }
                }
            }
        }
    },
    scrollbar: {
        enabled: false
    },
    colors: ["#ad49a5"]

      

+3


source to share


1 answer


Your data is not written correctly (timestamp).

Take the first example: 1370787037000

if you convert it, you get it Sun, 09 Jun 2013 14:10:37 GMT

, and it is exactly as shown in the diagram.



If you want this point to be exactly on Sun, 09 Jun 2013 00:00:00 GMT

, the correct timestamp is 1370736000000

. You must do this for every date.

0


source







All Articles