Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts: Get visibility of series after legendItemClick

I have a chart with multiple series which I would like to modify the options of, if two of the series have been disabled by clicking on the legend.

The following won't work as visible has the value of the state before it was clicked. Is there another way to do what I am trying to accomplish below?

plotOptions: {
    series: {
        events: {
            legendItemClick: function(event) {
                if(this.yAxis.series[0].visible && this.yAxis.series[1].visible) {
                    // do some action
                }
            }
        }
    }
},
like image 907
dan-klasson Avatar asked Dec 31 '13 07:12

dan-klasson


People also ask

What are the event hooks in Highcharts?

General event handlers for the series items. These event hooks can also be attached to the series at run time using the Highcharts.addEvent function. Fires after the series has finished its initial animation, or in case animation is disabled, immediately as the series is displayed.

How to style data labels in Highcharts?

In styled mode, the data labels can be styled with the .highcharts-data-label-box and .highcharts-data-label class names ( see example ). Options for the series data sorting. A description of the series to add to the screen reader information about the series. Defaults to undefined.

Where can I find the Highcharts API?

These pages outline the chart configuration options, and the methods and properties of Highcharts objects. Feel free to search this API through the search bar or the navigation tree in the sidebar.

How to set the color of the Highcharts-series in styled mode?

In styled mode, the color can be defined by the colorIndex option. Also, the series color can be set with the .highcharts-series , .highcharts-color- {n}, .highcharts- {type}-series or .highcharts-series- {n} class, or individual classes given by the className option. Defaults to undefined.


1 Answers

You can get this behavior a little modyfing your function:

plotOptions: {
  series: {
    events: {
      legendItemClick: function(event) {
          var series = this.yAxis.series,
              seriesLen = series.length,
              visible = this.visible ? 1 : -1; 
              // +1 when visible series, because it will be changed after that callback

          for(var i = 0; i < seriesLen; i++) {
            if(!series[i].visible) {
              visible++;
            }
          }
          if(visible >= 2){
            //do some action
          }
      }
    }
  }
},
like image 96
Paweł Fus Avatar answered Oct 30 '22 14:10

Paweł Fus