Sunburst

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

const data = [{
  id: '1.1',
  name: 'Chrome'
}, {
  id: '1.2',
  name: 'Safari'
}, {
  id: '1.3',
  name: 'Firefox'
}, {
  parent: '1.1',
  value: 36,
  name: 'Chrome v97'
}, {
  parent: '1.1',
  value: 18,
  name: 'Chrome v96'
}, {
  parent: '1.2',
  value: 2,
  name: 'Safari v15'
}, {
  parent: '1.2',
  value: 2,
  name: 'Safari v14'
}, {
  parent: '1.2',
  value: 2,
  name: 'Safari v13'
}, {
  parent: '1.3',
  value: 4,
  name: 'Firefox v96'
}, {
  parent: '1.3',
  value: 2,
  name: 'Firefox v95'
}, {
  parent: '1.3',
  value: 1,
  name: 'Firefox v94'
}];


Highcharts.chart('container', {
  series: [{
    type: 'sunburst',
    data: data,
    levels: [{
      level: 1,
      colorByPoint: true
    }, {
      level: 2,
      colorVariation: {
        key: 'brightness',
        to: -0.5
      }
    }]
  }]
});