How to show storylines in a legend in Highcharts?

Question

Not only do I want my legend to contain the names of the series, I also want it to contain the name of my other elements, such as my storyline. Here is my code:

plotLines: [
    {
        color: 'red',
        dashStyle: 'shortdash',
        value: response.AverageTime,
        width: 2,
        label: {
            text: response.PlotLineName, 
            x: +10, 
            y: +30,
            rotation: 360,
            color: 'red'
        }
    }
]

So, I want my storyline name, which is "Average Speed ​​Deviation", to look like a legend field, as shown below. How can i achieve this?

Answer 1

You can create an empty series that mimics the characteristics of the plot line (color, dash style ...). Then, if necessary, you can use the event legendItemClickto “link it” to the plot line.

, ID :

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

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

:

xAxis: {
    plotLines: [ plotLineOptions ]
}

:

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);
                }
            }
        }
    }
]

JSFiddle , ( , ).

Answer 2

, , , ...

plotLine ...

:

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

:

• http://jsfiddle.net/jlbriggs/3d3fuhbb/74/