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