2

I have an example taken from highcharts: this question is very similar to Highcharts: legend of stacked chart however I havent found the answer I'm looking there. what I'm looking is something is to group the stack legends like shown below for every name legend it belongs.

enter image description here

in my case I want to have following structure in the legend

Male:
 Joe
 JOhn
Female:
 Janet
 Jane

is that possible?

I also tried : http://jsfiddle.net/7sgdbezh/ however since I'd be having multiple legends I dont want to clutter the chart with too many redundant stack name values.

$(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'
        }]
    });
});
user1234
  • 3,000
  • 4
  • 50
  • 102
  • Try to use the Highchart class instead of using the JS directly. There might be some differences. e.g:- Highcharts.chart('container', { }); – Sarun UK Sep 26 '20 at 08:15
  • @SarunUK: this is not my appl, this is just an example I took from source, in my actaully app, I dont use either of that. I dont think that is the issue at all.. :( – user1234 Sep 26 '20 at 08:19
  • provide more info related to your use case. I will try to help :) – Sarun UK Sep 26 '20 at 08:24
  • @SarunUK: so this is the example I'm playing with, since my app is too heavy to create a fiddle from, I'm using https://jsfiddle.net/itsjustcarlos/uz1t1fbu/1/ as my POC. As you can see there are stacked labels listed: "seconds streets sis" however they are repeated for every stack , i.e stack:["home", "vavcation","work" ]. I want to visually group these legends into categories under stack name, i.e ```home: seconds, streets, sis``` ==>image as shown above – user1234 Sep 26 '20 at 08:37

0 Answers0