score:15

Accepted answer

You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.

For example, you predefine these variables for ID and plot line options:

plotLineId = 'myPlotLine'; // To identify for removal

// Plot line options for adding
plotLineOptions = {
    color: '#FF0000',
    id: plotLineId, 
    width: 2,
    value: 5.5,
    dashStyle: 'shortdash'
};

Your axis plotline:

xAxis: {
    plotLines: [ plotLineOptions ]
}

Your mimic series:

series: [
    // ...
    {
        // Series that mimics the plot line
        color: '#FF0000',
        name: 'My plotline',
        dashStyle: 'shortdash',
        marker: {
            enabled: false
        },
        events: {
            // Event for showing/hiding plot line
            legendItemClick: function(e) {
                if(this.visible) {
                    this.chart.xAxis[0].removePlotLine(plotLineId);
                }
                else {
                    this.chart.xAxis[0].addPlotLine(plotLineOptions);
                }
            }
        }
    }
]

See this JSFiddle demonstration of how it works (or this minimal example, without events).

score:10

Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...

You can just use that series as your plotLine, and skip all of the extra work of tying everything together...

like:

{  
  name: 'Plot Line',
  color: 'red',
  type:'line',
  dashStyle: 'shortdash',
  lineWidth: 2,
  data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}

Example:


Related Query

More Query from same tag