CODEWITHSUNDEEP
javascriptgraphhighcharts
TheBigDoubleA
TheBigDoubleA

Reputation: 452

How to create legend for Plotlines with Highstock of Highcharts?

I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/

I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.

In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.

This is how I've created the Plotlines:

xAxis: {
   plotLines: [{
      value: Date.UTC(2016, 12, 29), // year, month, day
      width: 1,
      color: 'blue',
      dashStyle: 'ShortDash',
      label: {
          text: 'Category 1',
      },
   }, {
      value: Date.UTC(2016, 11, 12), // year, month, day
      width: 1,
      color: 'green',
      dashStyle: 'Solid',
      label: {
          text: 'Category 2',
      }]
}

Upvotes: 0

Views: 1511

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

As noted in my comment, there is a feature request here:

Please add your votes and comments.

Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.

The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.

Example series:

{
  name: 'PlotLine',
  type: 'line',
  color: 'rgba(204,0,0,1)',
  data: [25,25,25,25,25,25,25,25,25,25]
}

Fiddle:

If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.

{{EDIT to demo vertical plot line:

First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):

yAxis: {
  min: 0,
  max: 75,
  maxPadding: 0
}

Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:

data: [[4,0], [4,75]]

Updated fiddle:

With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:

data: [[4,0], [4,75], [5,null], [7,0],[7,75]]

Fiddle:

Upvotes: 1

Vladimir M
Vladimir M

Reputation: 4489

As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/

 chart.xAxis[0].removePlotLine('plot-line-1');

 chart.xAxis[0].addPlotLine({
        ....
        id: 'plot-line-1'
    });

Upvotes: 1

Related Questions