CODEWITHSUNDEEP
javascripthighcharts
user1234
user1234

Reputation: 3159

display legends for Grouped-Stacked column charts- highhcarts

I am using highcharts to render a column chart. Since its a Grouped-Stacked column chart, currently im getting legend names duplicated as you can see here in the fiddle:

enter image description here

http://jsfiddle.net/z7aLr6cu/

I am trying to render only unique names in the legends; in my case:

john fem

I'm basically trying to sup up all the legends together (john= > blue colum series + green + purple)

Code:

$(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: "Confirmed",
                                stack: "ACTIVE",
                data: [4740, 1378, 8]
            }, {
                data: [2932, 141],
                name: "Potential",
                stack: "ACTIVE"
            }, {
                data: [1752, 11],
                name: "Confirmed",
                stack: "REOPENED"
            },{
            data: [1089, 2],
            name: "Potential",
            stack: "REOPENED"
            },{
            data: [2332, 1960, 42],
              name: "Potential",
              stack: "NEW"
            },{
            data:[480, 4684, 2258],
            name: "Confirmed",
            stack: "NEW"
            }]
        });
    });

is this possible

Upvotes: 0

Views: 68

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Use linkedTo property:

series: [{
  ...,
  id: 'john'
}, {
  ...,
  id: 'fem'
}, {
  ...,
  linkedTo: 'john'
}, {
  ...,
  linkedTo: 'fem'
}, {
  ...,
  linkedTo: 'john'
}, {
  ...,
  linkedTo: 'fem'
}]

Live demo: http://jsfiddle.net/BlackLabel/a4sog5xb/

API Reference: https://api.highcharts.com/highcharts/series.bubble.linkedTo

Upvotes: 1

Related Questions