Accepted answer

you will most likely have to use the highcharts renderer for this task, as what you want to do doesn't quite fit in with a grid, and doesn't quite fit in with plot lines.

i have made a very simple example, based on your code which shows drawing an arbitrary vertical line, in a hard-coded location. to achieve your goal you will have to calculate a few things, such as the x/y position for the start point of each line, and the height of the line based on that points value.

here's a slightly different example with zindex and a line as you actually want it, using the v path command to draw a vertical line.


the solution is to include a new series with the type column and add the same data to this serie than the other serie that includes the point.

    /* column type */
    type: 'column',
    name: '',
    data: [],
    color: '#ed1c24',
    pointwidth: 2,
    showinlegend: false,
    states: { hover: { enabled: false } }

use this jsfiddle as guide:


if you want ony one line (and area starting from that):

    plotlines: [{
        color: 'red', // color value
        //dashstyle: 'solid', // style of the plot line. default to solid
        value: + new date(), // value of where the line will appear
        width: '2' // width of the line    
    plotbands: [{
        color: '#fffafa', // color value
        from:  +new date(), // start of the plot band
        to:    +new date()+1000*24*3600*30, //30 days


try this jsfiddle. from highcharts api.


i think you might be looking for plot bands and/or plot lines.

here's some more information:

Related Query

More Query from same tag