Highcharts - get visible series name dynamically

Question

I want to make a function which send dynamically all visible series name in a Highchart instance to a PHP function. For example, in this chart, I want to get this array : [Salle, PR]. If I click on Internet, the serie become visible and I want to get [Salle, Internet, PR].

To do this, I tried to use legendItemClick event and make a function that check if each serie is visible to add it to an array but I can't figure out how to use the visible option to do this.

Do you have an idea ?

As of now, I don't have much code to share :

plotOptions: {
        series: {
            events: {
                legendItemClick: function(){

                }
            }
        }
    }

Vladimir M Vladimir M · Accepted Answer · 2016-12-27T19:58:46

If you retain the pointer to your chart like this:

var ch = Highcharts.chart(_chart_data_);

Then later you can access the whole chart structure. What you will be interested in is the series array.

ch.series[]

It contains array of all your series. Series with visible attribute set to true are the ones that currently displayed. So,it might be something like this:

var ch = Highcharts.chart(...

plotOptions: {
        series: {
            events: {
                legendItemClick: function(){
                   ch.series.forEach(function(sr){
                         if(sr.visible){
                            console.log(sr.name, "visible!");
                         }
                   });
                }
            }
        }
    }

...);

However, there is a catch with your approach, that on actual legend click your current action for the legend is not yet processed.so the output you will see is the output for the previous state, before current click.

So for that reason you may try to use setTimeout to get your listing after the event is applied:

         events: {
            legendItemClick: function(){
               setTimeout(
                  function(){ 
                      ch.series.forEach(
                          function(sr){
                              if(sr.visible){
                                 console.log(sr.name, "visible!");
                              }
                           }
                       )
                    },20);
                }
            }

Try this and check the console log: http://jsfiddle.net/op8142z0/

Highcharts - get visible series name dynamically

1 Answers