Sunburst - series data labels

Set rotation angle

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 600px;
  margin: 0 auto
}

JavaScript

var colors = Highcharts.getOptions().colors;

// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');

var myData = [{
  id: '0.0'
}, {
  id: 'Consumer',
  parent: '0.0',
  name: 'Consumer',
  color: colors[1]
}, {
  parent: 'Consumer',
  name: 'Furniture',
  value: 147
}, {
  parent: 'Consumer',
  name: 'Office Supplies',
  value: 1151
}, {
  parent: 'Consumer',
  name: 'Technology',
  value: 1157
}, {
  id: 'Corporate',
  name: 'Corporate',
  parent: '0.0',
  color: colors[2]
}, {
  parent: 'Corporate',
  name: 'Furniture',
  value: 3366
}, {
  parent: 'Corporate',
  name: 'Office Supplies',
  value: 905
}, {
  parent: 'Corporate',
  name: 'Technology',
  value: 2531
}, {
  id: 'Home office',
  name: 'Home office',
  parent: '0.0',
  color: colors[3]
}, {
  parent: 'Home office',
  name: 'Furniture',
  value: 5438
}, {
  parent: 'Home office',
  name: 'Office Supplies',
  value: 840
}, {
  parent: 'Home office',
  name: 'Technology',
  value: 2753
}, {
  id: 'Small Business',
  name: 'Small Business',
  parent: '0.0',
  color: colors[4]
}, {
  parent: 'Small Business',
  name: 'Office Supplies',
  value: 234
}, {
  parent: 'Small Business',
  name: 'Technology',
  value: 15261
}].map(function(i) {
  i.visible = true;
  return i;
});

Highcharts.chart('container', {

  chart: {
    height: '100%',
    type: 'sunburst'
  },

  title: {
    text: 'World population 2017'
  },

  plotOptions: {
    series: {

      events: {
        legendItemClick: function(e) {
          series = this;
          data.forEach(function(leaf) {
            if (leaf.id === series.name || leaf.parent === series.name) {
              leaf.visible = !leaf.visible;
            }
          });
          this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
        }
      }
    }
  },
  series: [{
      data: myData.slice(),
      //allowDrillToNode: true,
      //cursor: 'pointer',
      dataLabels: {
        /**
         * A...