Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grouping Legends in Highcharts

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.

like image 729
Agi la Avatar asked Apr 10 '13 12:04

Agi la


People also ask

What is Highchart legend?

The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend. It is possible to override the symbol creator function and create custom legend symbols.

What is stack in Highcharts?

Stacked charts are often used to visualize data that accumulates to a sum. This chart is showing data labels for each individual section of the stack.

What is legend layout?

Layouts. Layouts provide an interface with which we can compose a print layout, to print to PDF or to a printer. Legends. Legends provide a visual guide to symbology used in maps, drawings, images, and labels.


1 Answers

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'
like image 129
jlbriggs Avatar answered Oct 17 '22 06:10

jlbriggs