0

I'm using Highcharts Highstock chart to display daily data. The vertical (x-axis) gridlines do not align with the data point (gridline is to the left of the data point). Does anyone know how to align the gridline with the data point?

http://jsfiddle.net/kngz3exf/3/

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
$(function () {
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            enabled: false
        },

        yAxis: {
            gridLineWidth: 0
        },

        xAxis: {
            gridLineColor: '#000000',
            gridLineWidth: 1,
            lineColor: '#000000',
            tickColor: '#000000',
            minorGridLineColor: '#000000',
            minorGridLineWidth: 1,
            minorTickColor: '#000000',
            ordinal: true,
            tickInterval: 86400000,
            minorTickInterval: 86400000
        },

        series: [{
            data:[
                [1417410000000, -0.4818850000000001],
                [1417496400000, -0.40866199999999997],
                [1417582800000, 0.20889499999999994],
                [1417669200000, -0.623542],
                [1417755600000, -0.060399999999999995],
                [1418014800000, -0.56108],
                [1418101200000, 0.30852700000000005],
                [1418187600000, -0.4492829999999999],
                [1418274000000, -0.275211],
                [1418360400000, 0.013063999999999965],
                [1418619600000, -0.27293900000000004],
                [1418706000000, 0.49981200000000003],
                [1418792400000, 0.2362090000000001],
                [1418878800000, 0.4464490000000003],
                [1418965200000, 1.2100639999999998],
                [1419224400000, -0.792635],
                [1419310800000, 0.14788899999999994],
                [1419397200000, 0.011684],
                [1419570000000, 0.08526699999999998],
                [1419829200000, -0.12494599999999997],
                [1419915600000, -0.06489100000000003],
                [1420002000000, 0.279632]
            ]
        }]
    });
});
Michael
  • 434
  • 1
  • 5
  • 12

2 Answers2

1

By changing my date format from ticks to Date.UTC(yyyy, mm, dd), I can get the data point to align with the vertical grid line.

Michael
  • 434
  • 1
  • 5
  • 12
0

What you need to do is set the useUTC to false. Now your Dec 2nd data show on Dec 2nd axis tick. Note that your data is not going to hit every major tick mark - looks like you are skipping weekends but your axis is not.

wergeld
  • 14,332
  • 8
  • 51
  • 81
  • Hmm... Doesn't seem to be working. I want one vertical line for each date. I want each date's data point to align with the vertical line. I've set useUTC = false, ordinal: true, and the minor and major tick intervals to be one day (in ticks), but not looking good - [http://jsfiddle.net/kngz3exf/3/](http://jsfiddle.net/kngz3exf/3/) – Michael Jan 03 '15 at 17:37
  • 1
    By changing my date format from ticks to Date.UTC(yyyy, mm, dd), I can get the data point to align with the vertical grid line. Only thing left is to not show vertical line on weekends - [http://jsfiddle.net/kngz3exf/4/](http://jsfiddle.net/kngz3exf/4/) – Michael Jan 03 '15 at 17:45