Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 65,
      beta: 0
    },
    events: {
      load() {
        let chart = this;
        var x, angle, centerX = chart.series[0].center[0],
          rad = chart.series[0].center[2] / 3;
        Highcharts.each(chart.series[0].data, function(p, i) {
          angle = p.angle;
          x = centerX + rad * Math.cos(angle);
          p.dataLabel.attr({
            x: x,
            'text-anchor': 'right'
          });
        })
      },
      redraw() {
        let chart = this;
        var x, angle, centerX = chart.series[0].center[0],
          rad = chart.series[0].center[2] / 3;
        Highcharts.each(chart.series[0].data, function(p, i) {
          angle = p.angle;
          x = centerX + rad * Math.cos(angle);
          p.dataLabel.attr({
            x: x,
            'text-anchor': 'right'
          });
        })
      }
    }
  },
  series: [{
    type: 'pie',
    depth: 35,
    data: [{
        y: 100,
        sliced: true
      },
      {
        y: 100,
        sliced: true
      },
      {
        y: 70,
        sliced: true
      },
      {
        y: 100,
        sliced: true
      },
      {
        y: 100,
        sliced: true
      }
    ],
    dataLabels: {
      distance: -20,
      formatter: function() {
        if (this.percentage != 0) return Math.round(this.percentage) + '%';
      }
    }
  }]
});