title: Column chart with negative values and categories on xAxis in HighCharts
body: <p>Well, I'm using highcharts in web app. 
  Here is task to show Demographical data in column chart like on image :</p>
  
  <p><a href="https://i.stack.imgur.com/MUq92.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MUq92.jpg" alt="enter image description here"></a></p>
  
  <p>What I have for now is just next example : <a href="http://jsfiddle.net/futw5e8k/1/" rel="nofollow noreferrer">http://jsfiddle.net/futw5e8k/1/</a></p>
  
  <pre><code>Highcharts.chart('container', {
  
  chart: {
      type: 'column'
  },
  
  title: {
      text: 'Total fruit consumtion, grouped by gender'
  },
  
  xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
      offset: -150
  },
  
  yAxis: {
      allowDecimals: false,
      title: {
          text: 'Number of fruits'
      }
  },
  
  tooltip: {
      formatter: function () {
          return '&lt;b&gt;' + this.x + '&lt;/b&gt;&lt;br/&gt;' +
              this.series.name + ': ' + this.y + '&lt;br/&gt;' +
              'Total: ' + this.point.stackTotal;
      }
  },
  
  plotOptions: {
      column: {
          stacking: 'normal'
      }
  },
  
  series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2],
  }, {
      name: 'Joe',
      data: [-3, -4, -4, -2, -5],
  }]
  
  });
  </code></pre>
  
  <p>Currently is problem with displaying <code>categories</code> in middle of graph with some space. In my example <code>offset</code> isn't generated according to data, so isn't for all cases</p>