Highcharts: legend of stacked chart

Question

This is the chart I have for example to explain the question.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});

We have series names in the legend. And chart is stacked with grouped columns. we have stacked them in male and female categories.

Is there any way to get Male and Female in the legends? so that we can see only male food consumption or female food consumption at a time.

You can refer fiddle as here - jsfiddle.net/bLZHd/

Thanks

score 2 · Accepted Answer · answered Jul 05 '13 at 09:35

You can use labelFormatter to replace item name with stack name. Two series shoud be hidden in legend (showInLegend) paramter. Then only what you need is catching legendItemClick and iterate for checking serie stack name.

legendItemClick: function () {
                    var chart = this.chart,
                        key = this.options.stack;   

                    $.each(this.chart.series,function(i,serie){

                        if(serie.options.stack === key) {
                            if(serie.visible)
                                serie.hide();
                            else
                                serie.show();
                        }    

                    });
                    return false;
                }

http://api.highcharts.com/highcharts#legend.labelFormatter

score 1 · Answer 2 · answered Jul 05 '13 at 06:24

1

Do you really need to switch by legends?

I would recommend you that kind of issue, that switch by spans: http://jsfiddle.net/bLZHd/1/

All you need is:

$.each(chart.series, function (k, v) {
    if (v.options.stack == elemId) { //elemId is the string to compare
        chart.series[k].show();
    } else {
        chart.series[k].hide();
    }
});

answered Jul 05 '13 at 06:24

Andrey Nelubin

3,084
1
20
25

Hello Andrey, Thanks for the response. I tried your solution, but it gives me below error. ------------------------- $('.legend').on('click', function() { Uncaught TypeError: Object # – Mittal Patel Jul 05 '13 at 07:45
The reason is that you're using the old version of jQuery. Try to update or use `$('.legend').click(function...` instead. – Andrey Nelubin Jul 05 '13 at 11:05
Could these spans be used instead of the legend of highcharts? That would be awesome! – Rob Audenaerde Jun 24 '15 at 09:40

Highcharts: legend of stacked chart

2 Answers2

Linked