Highcharts level config1

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 data = [{
  'id': '0.0',
  'parent': '',
  'name': 'The World'
}, {
  'id': '1.3',
  'parent': '0.0',
  'name': 'Asia',
  'value': 4503248822
}, {
  'id': '1.1',
  'parent': '0.0',
  'name': 'Africa',
  'value': 1256268025
}, {
  'id': '1.2',
  'parent': '0.0',
  'name': 'America',
  'value': 1006801064
}, {
  'id': '1.4',
  'parent': '0.0',
  'name': 'Europe',
  'value': 743253404
}, {
  'id': '1.5',
  'parent': '0.0',
  'name': 'Oceanic',
  'value': 32439642
}];

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


Highcharts.chart('container', {

  chart: {
    height: '100%'
  },

  title: {
    text: 'World population 2017'
  },
  series: [{
    type: "sunburst",
    data: data,
    allowDrillToNode: true,
    cursor: 'pointer',
    dataLabels: {
      /**
       * A custom formatter that returns the name only if the inner arc
       * is longer than a certain pixel size, so the shape has place for
       * the label.
       */
      formatter: function() {
        var shape = this.point.node.shapeArgs;

        var innerArcFraction = (shape.end - shape.start) / (2 * Math.PI);
        var perimeter = 2 * Math.PI * shape.innerR;

        var innerArcPixels = innerArcFraction * perimeter;

        if (innerArcPixels > 16) {
          return this.point.name;
        }
      }
    },
    levels: [{
      level: 1,
      colorByPoint: true,
      dataLabels: {
        rotation: 0
      }
    }, {
      level: 2,
      colorByPoint: true,
      dataLabels: {
        rotationMode: 'parallel'
      }
    }, {
      level: 3,
      colorVariation: {
        key: 'brightness',
        to: -0.5
      }
    }, {
      level: 4,
      colorVariation: {
        key: 'brightness',
        to: 0.5
      }
    }]

  }],
  tooltip: {
    headerFormat: "",
    pointFormat: 'Population:{point.value} [{point.name}]'
  }
});