title: highcharts donut chart center text overlaps with tooltip
body: <p>I am showing text in the center of Highcharts Donut/Pie chart.
  But my problem is that the center text overlaps with the tooltip text and tooltip becomes unreadable.</p>
  
  <p>I have tried changing the zIndex of tooltip to bring it to front but it doesn't work. I want the tooltip to be on top of the donut center text.</p>
  
  <p>See complete chart here: <a href="http://jsfiddle.net/SufianRashid/88q5uke1" rel="nofollow noreferrer">http://jsfiddle.net/SufianRashid/88q5uke1</a></p>
  
  <pre><code>
  
  //==================== HIGH CHARTS =========================//
  function RenderPieChart(chartId, chartData, donutCenterText) {
      $('#' + chartId).highcharts({
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: 0,
              plotShadow: false,
              height: 270
          },
          credits: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
          title: {
              text: '',
              align: 'center',
              verticalAlign: 'middle',
              y: 0,
              useHTML: true
          },
          tooltip: {
              backgroundColor: 'white',
              useHtml: true,
              //zIndex: 99, //on top of everything
              headerFormat: '',
              pointFormat: '{point.actualCounts} {point.name}'
          },
          plotOptions: {
              pie: {
                  dataLabels: {
                      formatter: function () { if (this.y != 0) return this.y + '%'; },    //don't show 0% values
                      enabled: true,
                      distance: -25,  //change this value to show label inside/outside the pie chart (negative means towards inside)
                      style: {
                          fontWeight: 'bold',
                          color: 'white',
                          textShadow: '0px 1px 2px black'
                      }
                  },
                  //showInLegend: true,
                  startAngle: 0,
                  endAngle: 360,
                  center: ['50%', '50%']
              },
              //-------- On click open drill down url --------//
              series: {
                  cursor: 'pointer',
                  point: {
                      events: {
                          click: function () {
                              location.href = this.options.url;   //same window
                          }
                      }
                  }
              }//End adding link
              //--------------------------------//
          },
          series: [{
              type: 'pie',
              innerSize: '140px',
              //--------------------//
              data: chartData
              //--------------------//
          }]
      },
          //-------- Show Center Text ------//
          function (chart) {
  
              var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
              var ypos = chart.plotTop + (chart.plotHeight * 0.4);
  
  
              // Render the text 
              chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
  
          }
      );  //EOF: HighChart
  }
  </code></pre>