Sunburst

author(s): Torstein Hønsi

by Geo George

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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Sunburst charts are used to visualize hierarchical data in a
        circular shape. The inner elements are parent nodes, with
        child nodes distributed on the outer rings. Click on a parent
        node to drill down and inspect the tree in more detail.
    </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var data = [{
    id: '0.0',
    parent: '',
    name: 'The World'
}, {
    id: '1.3',
    parent: '0.0',
    name: 'Asia'
}, {
    id: '1.1',
    parent: '0.0',
    name: 'Africa'
}, {
    id: '1.2',
    parent: '0.0',
    name: 'America'
}, {
    id: '1.4',
    parent: '0.0',
    name: 'Europe'
}, {
    id: '1.5',
    parent: '0.0',
    name: 'Oceanic'
},

/* Africa */
{
    id: '2.1',
    parent: '1.1',
    name: 'Eastern Africa'
},

{
    id: '3.1',
    parent: '2.1',
    name: 'Ethiopia',
    value: 104957438
}, {
    id: '3.2',
    parent: '2.1',
    name: 'Tanzania',
    value: 57310019
}, {
    id: '3.3',
    parent: '2.1',
    name: 'Kenya',
    value: 49699862
}, {
    id: '3.4',
    parent: '2.1',
    name: 'Uganda',
    value: 42862958
}, {
    id: '3.5',
    parent: '2.1',
    name: 'Mozambique',
    value: 29668834
}, {
    id: '3.6',
    parent: '2.1',
    name: 'Madagascar',
    value: 25570895
}, {
    id: '3.7',
    parent: '2.1',
    name: 'Malawi',
    value: 18622104
}, {
    id: '3.8',
    parent: '2.1',
    name: 'Zambia',
    value: 17094130
}, {
    id: '3.9',
    parent: '2.1',
    name: 'Zimbabwe',
    value: 16529904
}, {
    id: '3.10',
    parent: '2.1',
    name: 'Somalia',
    value: 14742523
}, {
    id: '3.11',
    parent: '2.1',
    name: 'South Sudan',
    value: 12575714
}, {
    id: '3.12',
    parent: '2.1',
    name: 'Rwanda',
    value: 12208407
}, {
    id: '3.13',
    parent: '2.1',
    name: 'Burundi',
    value: 10864245
}, {
    id: '3.14',
    parent: '2.1',
    name: 'Eritrea',
    value: 5068831
}, {
    id: '3.15',
    parent: '2.1',
    name: 'Mauritius',
    value: 1265138
}, {
    id: '3.16',
    parent: '2.1',
    name: 'Djibouti',
    value: 956985
}, {
    id: '3.17',
    parent: '2.1',
    name: 'Réunion',
    value: 876562
}, {
    id: '3.18',
    parent: '2.1',
    name: 'Comoros',
    value: 813912
}, {
    id: '3.19',
    parent: '2.1',
    name: 'Mayotte',
    value: 253045
}, {
    id: '3.20',
   ...