Hide/Show multiple series in HighCharts

Question

I am using HighCharts. I have data that is rendered in a pie chart. When I click on the legend-label, I can hide/show my different pie slices. Woo!

What I would like to do, is hide/show different columns to the same effect in this view. (Clicking on dog/bird should remove the column - the same as the pie slice).

My series is:

    series: [{
        type: "pie", //Change to "column"
        data:[{
            name: "dog",
            age: 52,
            y: 52
        },
        {
            name: "bird",
            age: 12,
            y: 12
        }]
    }]

http://jsfiddle.net/Lmbw75mg/

How can I change my structure so that it will work for both?

What do you mean? Do you want two legend items just by changed "pie" to "column", that can toggle the individual columns? I'm fairly certain the outcome here wont be to have the same code, and have it working in both cases, but maybe similar functionality with different code. — Halvor Holsten Strand
Which column do you mean? Do you mean instead of type: 'pie' you want type: 'column'? So in this column demo a click on month May would hide the box for may? — surfmuggle

Raein Hashemi Raein Hashemi · Accepted Answer · 2015-05-19T04:24:45

For making it the same in a column chart you'll have to use two series, not one:

series: [{
        type: "column",
        name: "dog",
        data: [{
            age: 52,
            x: 0,
            y: 52
        }]
    }, {
        type: "column",
        name: "bird",
        data: [{
            age: 12,
            x: 1,
            y: 12
        }]
    }]

Also you'll have to define categories for xAxis:

xAxis: {
    type: 'category',
    tickWidth: 0,
    lineColor: "#C0D0E0",
    lineWidth: 1,
    categories: ['dog', 'bird']
}

And for making the columns equally spaced, you'll need to set plotOptions.column.grouping to false:

plotOptions: {
    colorByPoint: true,
    column: {
        grouping: false
    }
}

Here's the DEMO.

Hide/Show multiple series in HighCharts

1 Answers