Highcharts Grouped stack x.axis name + category name

Question

I am trying to get my highcharts graph to look like this or similar to this.

I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.

sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
      labels: {
                    rotation: -0,
                    style: {
                        fontSize: '10px',
                        align: 'Right',
                    }

                },
        categories: [{
                name: "Case A",
                categories: ["Male", "Female"]
            }, {
                name: "Case B",
                categories: ["Male", "Female"]
            }]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'x-axis'
        }
    },
    legend: {
        reversed: true
    },
  plotOptions: {
    bar: {
      stacking: 'normal'
    }
  },

    series: [{
        name: 'x',
        data: [5,3,4,5],
                stack: 'StackA'
    }, {
        name: 'y',
        data: [3,5,4,5],
        stack: 'StackA'
        },{
        name: 'x',
        data: [5,3,4,5],
                stack: 'StackB'
    }, {
        name: 'y',
        data: [3,5,4,5],
        stack: 'StackB'
        }
    ]
});

score 1 · Answer 1 · answered Jul 25 '17 at 12:15

To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.

API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack http://api.highcharts.com/highcharts/xAxis.labels.x

Example:
http://jsfiddle.net/sjtdgq9L/

score 1 · Accepted Answer · answered Jul 26 '17 at 01:08

Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.

Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: [{
          categories: ["Case A", "Case B","Case C", "Case D"],
          labels: {
            rotation: -90,
            x: -60,
            style: {
              fontSize: '10px',
              align: 'Right',
            }
          },
          tickWidth: 1,
          tickLength: 60,
    },
    {
       categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
       opposite: false,
        labels: {
          rotation: 0,
          x: 60,
          style: {
            fontSize: '10px',
            align: 'Right',
          }
        },
        tickWidth: 0,
    }],
    yAxis: {
        min: 0,
        title: {
            text: 'x-axis'
        }
    },
    legend: {
        reversed: true
    },
  plotOptions: {
    bar: {
      stacking: 'normal'
    }
  },
    series: [{
        name: 'x',
        data: [1,8,9,16],
                stack: 'StackA'
    }, {
        name: 'y',
        data: [1,7,10,15],
        stack: 'StackA'
        },{
        name: 'x',
        data: [3,6,11,14],
                stack: 'StackB'
    }, {
        name: 'y',
        data: [4,5,12,13],
        stack: 'StackB'
        },
         {
           name: '',
           data: [0,0,0,0,0,0,0,0],
           showInLegend: false,
           stack: 'StackB',
           xAxis: 1            
        }
    ]
});

score 0 · Answer 3 · answered Jul 24 '17 at 21:39

0

Change your series to:-

series: [{ name: 'x', data: [5,3,4,5] }, { name: 'y', data: [3,5,4,5] },{ name: 'x', data: [5,3,4,5] }, { name: 'y', data: [3,5,4,5] } ]

answered Jul 24 '17 at 21:39

Neil

821
9
17

Without a stack, it works, although my main data is based on stacks. I am trying to find a solution to get it work with stacks. – Alex D Jul 24 '17 at 21:49
in your solution you have removed `stack: 'StackA' & stack: 'StackB'`. Do you have a solution to keep them in, they are required for my data flow. – Alex D Jul 25 '17 at 01:56

Highcharts Grouped stack x.axis name + category name

3 Answers3