title: HighCharts Combination Chart
body: <p>I'm using combination charts in highcharts <a href="http://jsfiddle.net/hHC6R/1/" rel="nofollow">JSFiddle</a>. Above a certain point the pie chart comes in the way of line chart and hinder its visibility. </p>
  
  <p>How can I push the pie chart up/down dynamically based upon the value of line chart.</p>
  
  <p>Here is my highcharts code.</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'
                      }
                  }]
              },
              series: [{
                  type: 'spline',
                  name: 'Average',
                  data: [3, 6, 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: [100, 80],
                  size: 100,
                  showInLegend: false,
                  dataLabels: {
                      enabled: false
                  }
              }]
          });
      });
  </code></pre>
  
  <p>I want somthing like <a href="http://www.highcharts.com/demo/combo" rel="nofollow">this</a>. You see pie chart and spline are not clashing. But in my case, the value of spline being high, the pie chart hinders the visibility of spline. Pie chart should automatically adjust itself somewhere above or below the spline.</p>
  
  <p>How can I do this?</p>