Check if all legend items are selected in highcharts?

Question

I have a show/hide button which shows and hides charts based on the button text. If a user clicks the 'Hide' button the chart is hidden.'Show' displays the chart. However if the user clicks 'Hide' and manually clicks on all legend item one by one, the text 'Show' remains same. I need it to change to 'Hide' if all legend is manually selected and also 'show' if a user manually deselects all legend. How do i do check for this? Here is my link to the jsfiddle: https://jsfiddle.net/ytykG/12/

$(function () {
var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
            }
        },
        legend: {
            //enabled:false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    }, function (chart) {

        $('#btn').click(function () {
            for (i = 0; i < chart.series.length; i++) {
                if ($(this).text() === 'Hide') {
                    chart.series[i].hide();
                } else {
                    chart.series[i].show();
                }
            }
            var changeText = ($(this).text() == 'Hide') ? 'Show' : 'Hide';
            $(this).text(changeText);

        });
    });
});
});

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
  <div id="container" style="height: 400px"></div>

the jsfiddle you provided is not loading because you need to add 's' to the http for the imports of highcharts — Ali Al Amine

Rickkwa Rickkwa · Accepted Answer · 2015-04-23T20:31:02

I've added the following code which runs when you click on a legend item.

plotOptions: {
    line: {
        events: {
            legendItemClick: function (e) {
                var c = e.currentTarget.visible ? 0 : 1;
                for(i = 0; i < chart.series.length; i++) {
                    if (chart.series[i] != e.currentTarget && chart.series[i].visible) {
                        c++;
                    }
                    if (chart.series.length == c) {
                        $('#btn').text('Hide');
                    } else if (c == 0) {
                        $('#btn').text('Show'); 
                    }
                }
            }
        }
 },

Here is the fiddle.

The idea is to count the # of series that are visible and compare it with the total number of series. If the number of visible series is same as total, then all series are showing so the button becomes "Hide". If no visible, then button becomes "Show"

Note that legendItemClick runs before it hides/shows the series. So I used e.currentTarget to get the series that was clicked, then checked whether it was visible or not to compensate for the count. If it is visible, then after this function finishes running, it will no longer be visible.

Check if all legend items are selected in highcharts?

1 Answers