title: Highcharts Combo Graph Overlapping eachother
body: <p>I want to implement a Combo Graph with 
  1. Pie Chart
  2. Column 'Normal'
  3. Spine</p>
  
  <p>Now my problem is that if the column values are big, it overlaps the pie chart which does not make great viewing, I have a sample at <a href="http://jsfiddle.net/ykgNR/" rel="nofollow">JS Fiddle sample</a></p>
  
  <pre><code>$(function () {
      $('#container').highcharts({
          chart: {
          },
          title: {
              text: 'Combination chart'
          },
          xAxis: {
              categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
          },
          tooltip: {
              formatter: function() {
                  var s;
                  if (this.point.name) { // the pie chart
                      s = ''+
                          this.point.name +': '+ this.y +' fruits';
                  } else {
                      s = ''+
                          this.x  +': '+ this.y;
                  }
                  return s;
              }
          },
          labels: {
              items: [{
                  html: 'Total fruit consumption',
                  style: {
                      left: '40px',
                      top: '8px',
                      color: 'black'
                  }
              }]
          },
          plotOptions: {
              column: {
                  stacking: 'normal'
              }
          },
          series: [{
              type: 'column',
              name: 'Jane',
              data: [9, 9, 1, 3, 4]
          }, {
              type: 'column',
              name: 'John',
              data: [2, 9, 5, 7, 6]
          }, {
              type: 'column',
              name: 'Joe',
              data: [4, 3, 3, 9, 0]
          }, {
              type: 'spline',
              name: 'Average',
              data: [3, 2.67, 3, 6.33, 3.33],
              marker: {
                  lineWidth: 2,
                  lineColor: Highcharts.getOptions().colors[3],
                  fillColor: 'white'
              }
          }, {
              type: 'pie',
              name: 'Total consumption',
              data: [{
                  name: 'Jane',
                  y: 13,
                  color: Highcharts.getOptions().colors[0] // Jane's color
              }, {
                  name: 'John',
                  y: 23,
                  color: Highcharts.getOptions().colors[1] // John's color
              }, {
                  name: 'Joe',
                  y: 19,
                  color: Highcharts.getOptions().colors[2] // Joe's color
              }],
              center: [20, 80],
              size: 100,
              showInLegend: false,
              dataLabels: {
                  enabled: false
              }
          }]
      });
  });
  </code></pre>
  
  <p>please give me some hint on how to solve this, one thing that comes to mind is set X range larger then max value of the column but not sure how to do that either. </p>