Highcharts Grouped Column Chart with Multiple Groups?

Question

I'm looking to create a grouped column chart in Highcharts, except with multiple groups in a given day. The graph would look like this http://www.highcharts.com/demo/column-stacked-and-grouped (from this forum question http://highslide.com/forum/viewtopic.php?f=9&t=19575), except with each stacked bar replaced with a grouped set of columns (non-stacked). We would therefore see multiple groups of columns per day, the idea being that each group corresponds to one user. Does anyone know how to do this?

edit: Here's a jsfiddle I've found http://jsfiddle.net/pMA2H/1/

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>ElementStacks - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>



      <script type='text/javascript' src="http://highcharts.com/js/testing.js"></script>


  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){
/*
Data is:
                            Gross Amount    Cost Amount
Services       Australia    20              10              
               Germany      30              15
Manufacturing  Australia    35              17
               Germany      25              12

----

Would like to be able define my categories hierarchically - example:
xAxis: [{
  categories: [{
    name: 'Services'
    children: ['Australia', 'Germany']
  },{
    name: 'Manufacturing'
    children: ['Australia', 'Germany']
  }]
}]

and get a result similar to what is fudged up by using the renderer on the right.
*/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    }, 
    xAxis: [{
        categories: ['Australia', 'Germany', 'Australia', 'Germany'],
        labels: {
            y: 40
        }
    }],
    legend: {
        margin: 40
    },

    series: [{
        name: 'Gross',
        data: [['Services', 20],['Services',30],['Manufacturing', 35],['Manufacturing', 25]]
    },{
        name: 'Cost',
        data: [['Services', 10],['Services',15],['Manufacturing', 17],['Manufacturing', 13]]
    }]
}, function(chart){
    $('.highcharts-axis:first > text').each(function() {
       this.setAttribute('y', parseInt(this.getAttribute('y')) - 20)
    });

    var text1 = chart.renderer.text("Services", 150, 340).add();
    var text2 = chart.renderer.text("Manufacturing", 350, 340).add();
});
});//]]>  

</script>


</head>
<body>
  <div id="container" style="height: 400px; width: 500px"></div>


</body>


</html>

from the thread here http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments. The code for the x-axis increments is a bit tedious though, because you have to manually add each increment and include its spacing to make sure your data points line up. I've done graphs previously where you can instead specify a pointStart and pointInterval for dates. If someone knows of a more elegant solution, that'd be great.

I'm not sure how this should look like. Could you just remove stacking? Maybe you can show simple mockup for this? — Paweł Fus, May 01 '13 at 12:16
Sorry here's a jsfiddle of an example I've found http://jsfiddle.net/pMA2H/1/. This is what I was looking for; just wondered if anyone had dealt with this kind of grouped column chart before and had a solution. — Flash, May 01 '13 at 17:36
Give this plugin a try if using Highcharts http://blacklabel.github.io/grouped_categories/ — Raheel Shah, Aug 09 '17 at 06:53

score 2 · Answer 1 · answered May 01 '13 at 12:49

2

Unless there is something else you are not explaining, what you are asking for is the default behavior of a grouped column chart:

http://jsfiddle.net/jlbriggs/TfvGp/

all that is required to achieve this is multiple data series and a type of 'column'

answered May 01 '13 at 12:49

jlbriggs

17,612
4
35
56

score 2 · Accepted Answer · answered May 02 '13 at 09:10

2

You can use plugin for grouped categories, here you can find it: https://github.com/blacklabel/grouped_categories

answered May 02 '13 at 09:10

Paweł Fus

44,795
3
61
77

score 1 · Answer 3 · edited May 23 '17 at 11:59

1

I had the same problem, and solved it usign plain HighCharts. It needs some magical datashuffling, but the result is fair.

enter image description here

See here: https://stackoverflow.com/a/31029535/461499

edited May 23 '17 at 11:59

Community

1
1

answered Jun 24 '15 at 14:40

Rob Audenaerde

19,195
10
76
121

score 0 · Answer 4 · answered May 16 '14 at 05:37

0

To solve this problem, u need to stack on a variable that can't stack. Like: series :{

{ 
    name: 'boys', 
    stack: 1,
    data: [2, 6, 5,0] 
} 

{ 
    name: 'girls', 
    stack: 2,
    data: [0, 6, 1,3] 
}

} No stacking with 1,2,3,4 e.t.c

answered May 16 '14 at 05:37

crystoline

9
1

Highcharts Grouped Column Chart with Multiple Groups?

4 Answers4