CODEWITHSUNDEEP
javascripthighcharts
Stephen Burke
Stephen Burke

Reputation: 459

Hide/Show multiple series in HighCharts

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?

Upvotes: 0

Views: 1220

Answers (1)

Raein Hashemi
Raein Hashemi

Reputation: 3384

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.

Upvotes: 1

Related Questions