Grouping Legends in Highcharts

Question

I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar. can some one help me?

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

            chart: {
                type: 'bar'
            },

            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: {
                bar: {
                    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'
            }]
        });
    });

I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.

when you say you have 2 charts, do you mean you have multiple series with 2 points? 2 series with multiple points? 2 completely different charts? — Ben McCormick, Apr 10 '13 at 13:00
Refer this http://jsfiddle.net/cindrella_agi/6gw5P/ I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group. — Agi la, Apr 10 '13 at 13:07
You can't do that without losing information. See my answer. — Ben McCormick, Apr 10 '13 at 13:15

score 23 · Accepted Answer · answered Apr 10 '13 at 14:30

23

Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.

http://api.highcharts.com/highcharts#plotOptions.series.linkedTo

updated example: http://jsfiddle.net/jlbriggs/6gw5P/2/

linkedTo:':previous'

answered Apr 10 '13 at 14:30

jlbriggs

17,612
4
35
56

thats cool. upvoted. Still makes the colors confusing though. – Ben McCormick Apr 10 '13 at 14:40
Yeah, I don't think there's a great way to handle the colors. We can make it better though... http://jsfiddle.net/jlbriggs/6gw5P/4/ – jlbriggs Apr 10 '13 at 15:45

score 1 · Answer 2 · answered Jan 11 '17 at 16:14

1

I know this is an old issue, but setting showInLegend on your series, will work, and seems the easiest way.

showInLegend: false

Eg:

series: [{
 name: 'John',
 data: [5, 3, 4, 7, 2],
 stack: 'male',
 showInLegend: false
}

answered Jan 11 '17 at 16:14

Ralla

168
1
9

This was the solution I was looking for, everything else was far too complicated and more importantly, didn't work. However, I also included a `showInLegend: true` for the data point I _did_ want to include in the legend - and it worked perfectly. Thanks Jakob! – elPastor Dec 25 '17 at 14:12

score 0 · Answer 3 · answered Apr 10 '13 at 13:14

You can't group the legends by stack, because then you'll lose the ability to identify the different components (IE either the individual series won't have a distinct color or the legend color won't match them). The legends map to the people because those are all distinct data sources and since you add them that way it displays them like that.

If you don't care about the different components having a distinct color, then you don't want a stacked bar chart at all. You can just have a normal bar chart with 2 series, male and female.

series: [{
                name: 'Male',
                data: [10, 7, 8, 9, 7]
            },
                name: 'Female',
                data: [5, 5, 10, 6, 4]
            }
        }

score 0 · Answer 4 · answered Jan 07 '21 at 12:07

You can link series using ids and linkedTo. In the example below, the first serie is linked to the second:

series: [
        {
            type: 'column',
            name: '',
            data: [],
            linkedTo: 'second_serie_id',            // <--- this
            color: '#DE3733',
            pointWidth: 1,
            showInLegend: false,
        },
        {
            id: "second_serie_id",                  // <--- this
            type: 'scatter',
            name: 'FFT 1',
            data: [],
            color: '#DE3733',
            lineWidth: 0,
            showInLegend: true,
            states: { hover: { enabled: false } }
        }
        ]

Grouping Legends in Highcharts

4 Answers4

Linked