Question

I'm trying to toggle data on a highchart pie chart, but I could only find how to show/hide an entire series. Basically I want to replicate the legend behavior using my own buttons.

// the button action
var chart = $('#container').highcharts(),
    $button = $('#button');
$button.click(function() {
    var series = chart.series[0];
    if (series.visible) {
        series.hide();
        $button.html('Show series');
    } else {
        series.show();
        $button.html('Hide series');
    }
});

http://jsfiddle.net/waspinator/JLrc2/2/

Was it helpful?

Solution

First, you want to hide point/slice, not series. Then try to use .setVisible(true/false), see: http://jsfiddle.net/JLrc2/3/

// the button action
var chart = $('#container').highcharts(),
    $button = $('#button');
$button.click(function() {
    var ff = chart.series[0].data[0];
    if (ff.visible) {
        ff.setVisible(false);
        $button.html('Show firefox');
    } else {
        ff.setVisible(true);
        $button.html('Hide firefox');
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top