title: Highcharts Grouped Column Chart with Multiple Groups?
body: <p>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 <a href="http://www.highcharts.com/demo/column-stacked-and-grouped" rel="nofollow">http://www.highcharts.com/demo/column-stacked-and-grouped</a> (from this forum question <a href="http://highslide.com/forum/viewtopic.php?f=9&amp;t=19575" rel="nofollow">http://highslide.com/forum/viewtopic.php?f=9&amp;t=19575</a>), 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?</p>
  
  <p>edit: Here's a jsfiddle I've found <a href="http://jsfiddle.net/pMA2H/1/" rel="nofollow">http://jsfiddle.net/pMA2H/1/</a></p>
  
  <pre><code>&lt;html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
    &lt;title&gt;ElementStacks - jsFiddle demo&lt;/title&gt;
  
    &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"/&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"/&gt;
  
  
  
        &lt;script type='text/javascript' src="http://highcharts.com/js/testing.js"&gt;&lt;/script&gt;
  
  
    &lt;style type='text/css'&gt;
  
    &lt;/style&gt;
  
  
  
  &lt;script type='text/javascript'&gt;//&lt;![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 &gt; 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();
  });
  });//]]&gt;  
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container" style="height: 400px; width: 500px"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>from the thread here <a href="http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments" rel="nofollow">http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments</a>. 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.</p>