CODEWITHSUNDEEP
javascriptchartshighcharts
Adam
Adam

Reputation: 2031

Isolate a single series on Highcharts line chart

Is there a way that I can change the default behaviour of the Legend click handler in Highcharts.js so that when I click on a legend label it isolates the series, instead of hiding it. I.e. it should hide all other series on the chart.

http://jsfiddle.net/adamtsiopani/rNkBs/

legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        useHTML: true,
        labelFormatter: function () {
            console.log(this);
            return this.name + ' <a class="isolate-series">[isolate]</a>';
        }
    },

Upvotes: 0

Views: 775

Answers (1)

Cy Pangilinan
Cy Pangilinan

Reputation: 572

Is this what you want? Fiddle Link

Based on the API you have to add a click handler using legendItemClick to apply to the series. 

     plotOptions: {
            series:{
                   events: {
                        legendItemClick: function(event) {
                            if (!this.visible)
                                return true;

                            var seriesIndex = this.index;
                            var series = this.chart.series;

                            for (var i = 0; i < series.length; i++)
                            {
                                if (series[i].index != seriesIndex)
                                {

                                    series[i].visible ? series[i].hide() : series[i].show();
                                } 
                            }

                            return false;
                        }
                   }
             }
        }

Upvotes: 1

Related Questions