score:10

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.

score:0

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: http://jsfiddle.net/ndpu6/

score:2

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

xaxis:{     
    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
    }],
}

score:3

try this jsfiddle. from highcharts api.

score:5

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

here's some more information:

http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines


Related Query

More Query from same tag