gwar9 gwar9 - 6 months ago 102
jQuery Question

Does HighCharts have an option to dynamically add plotLines to xAxis via datetime?

Hi I know I can add a plotline by defining a date time on the xAxis like so

xAxis: {
plotLines: [{
color: '#dadada',
width: 1,
value: Date.UTC(2016, 2, 28)
}]


I want to dynamically add a plotline to each datetime day as new data is added from the database I'm using to the series.

http://jsfiddle.net/5ecgkcmf/

I want to achieve whats in the fiddle but dynamically without manually adding in all the values to account for past and future data

Does highcharts have a feature for detecting this or will I have to write some sort of complex loop and push the plotLines in?

Any guidance and solution is appreciated.

Answer

If you xAxis tick intervals are set to one day you can just make the xAxis.gridlines visible (they are set to gridLineWidth: 0 by default: $(function () {

$('#container').highcharts({
    xAxis: {
        gridLineWidth: 2,
        tickInterval: 24 * 3600 * 1000,
        // one day
        type: 'datetime'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
});

});