title: Highcharts. Dynamic labels inside donut chart on mouseOver
body: <p>so this is what I'm trying to acomplish:
  <a href="https://i.stack.imgur.com/clnTA.jpg" rel="nofollow noreferrer">Example</a></p>
  
  <p>What I need is:</p>
  
  <ul>
  <li><p>Label inside donut chart changing on mouse over</p></li>
  <li><p>Color depending on data</p></li>
  <li><p>Styling label to look like the picture</p></li>
  </ul>
  
  <p>I actually managed to do the mouse over but I can't change the color according to data and place it in the middle</p>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/9cjxb97a/1/" rel="nofollow noreferrer">https://jsfiddle.net/9cjxb97a/1/</a></p>
  
  <p>Here is the code I wrote so far:</p>
  
  <pre><code>    Highcharts.chart('container', {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: ''
    },
    exporting: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    colors: ['red', 'blue', 'green'],
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false,
          format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      },
      series: {
        point: {
          events: {
            mouseOver: function() {
              var chart = this.series.chart;
              if (!chart.lbl) {
                chart.lbl = chart.renderer.label('')
                  .attr({
                    padding: 10,
                  })
                  .css({
                    color: 'red',
                  })
                  .add();
              }
              chart.lbl
                .show()
                .attr({
                  text: this.y + '%'
                });
            }
          }
        },
  
      },
    },
    series: [{
      name: 'Brands',
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33
      }, {
        name: 'Chrome',
        y: 24.03,
  
      }, {
        name: 'Firefox',
        y: 10.38
      }, {
        name: 'Safari',
        y: 4.77
      }, {
        name: 'Opera',
        y: 0.91
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2
      }],
      innerSize: '80%'
    }],
  
  });
  </code></pre>
  
  <p>Thanks</p>