Highcharts Demo

author(s): Torstein Hønsi

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 data = [
{
    'id': '1',
    'parent': '',
    'name': 'Argentina',
    'value':80
}, {
    'id': '2',
    'parent': '',
    'name': 'Brasil',
    'value':40
}, {
    'id': '3',
    'parent': '1',
    'name': 'Buenos Aires',
    'value':60
}, {
    'id': '4',
    'parent': '1',
    'name': 'Córdoba',
    'value':15
}, {
    'id': '5',
    'parent': '4',
    'name': 'Rio cuarto',
    'value':5
}, {
    'id': '6',
    'parent': '3',
    'name': 'CABA',
    'value':40
}, {
    'id': '7',
    'parent': '3',
    'name': 'Chivilcoy',
    'value':10
}, {
    'id': '8',
    'parent': '6',
    'name': 'North park',
    'value':5
}, {
    'id': '9',
    'parent': '6',
    'name': 'South park',
    'value':5
}

];

// Splice in transparent for the center circle

Highcharts.chart('container', {

    chart: {
        height: '100%'
    },

    title: {
        text: 'World population 2017'
    },
    series: [{
        type: "sunburst",
        data: data,
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            }
        },
        levels: [{
            level: 1,
            dataLabels: {
                rotationMode: 'parallel',
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        }, {
            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:...