Pie donut - Simple data

Gradation levels

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: 800px;
  margin: 0 auto
}

JavaScript

var colors = Highcharts.getOptions().colors;


Highcharts.chart('container', {

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

  title: {
    text: 'World population 2017'
  },
  subtitle: {
    text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
  },
  plotOptions: {
    sunburst: {
    }
  },
  series: [{
    type: "sunburst",
    data: [{
      id: '1.0',
      name: 'Consumer',
      color: colors[0]
    }, {
      parent: '1.0',
      name: 'Furniture',
      value: 147
    }, {
      parent: '1.0',
      name: 'Office Supplies',
      value: 1151
    }, {
      parent: '1.0',
      name: 'Technology',
      value: 1157
    }, {
      id: '2.0',
      name: 'Corporate',
      color: colors[1]
    }, {
      parent: '2.0',
      name: 'Furniture',
      value: 3366
    }, {
      parent: '2.0',
      name: 'Office Supplies',
      value: 905
    }, {
      parent: '2.0',
      name: 'Technology',
      value: 2531
    }, {
      id: '3.0',
      name: 'Home office',
      color: colors[2]
    }, {
      parent: '3.0',
      name: 'Furniture',
      value: 5438
    }, {
      parent: '3.0',
      name: 'Office Supplies',
      value: 840
    },{
      parent: '3.0',
      name: 'Technology',
      value: 2753
    },  {
      id: '4.0',
      name: 'Small Business',
      color: colors[3]
    }, {
      parent: '4.0',
      name: 'Office Supplies',
      value: 234
    }, {
      parent: '4.0',
      name: 'Technology',
      value: 15261
    }],
    allowDrillToNode: true,
    cursor: 'pointer',
    showInLegend: true,
    levels: [{
      level: 1
    }, {
      level: 2,
      colorVariation: {
        key: 'brightness',
        to: -0.4 //Tells the gradation extent
      }
    }]
  }],
  tooltip: {
    headerFormat: "",
    pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
  }
});