Highcharts Demo

author(s): Torstein Hønsi

by rhavelka

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: '0.0',
    parent: '',
    name: 'Vishal '
}, {
    id: '1.1',
    parent: '0.0',
    name: 'Software Developer'
}, {
    id: '1.2',
    parent: '0.0',
    name: 'Customer Service Associate'
},

/* Africa */
{
    id: '2.1',
    parent: '1.2',
    name: 'Data Entry'
},
{
    id: '2.2',
    parent: '1.2',
    name: 'Senior Data Entry'
},{
    id: '2.3',
    parent: '1.2',
    name: 'Quality'
},{
    id: '2.4',
    parent: '1.2',
    name: 'Utility Rep'
},{
    id: '2.5',
    parent: '1.2',
    name: 'Balance Forward Rep'
},{
    id: '2.6',
    parent: '1.1',
    name: 'Angular Developer'
},{
    id: '2.7',
    parent: '1.1',
    name: 'Server Developer'
},



{
    id: '3.1',
    parent: '2.1',
    name: 'Internal Email',
    value: 5*2
},
{
    id: '3.2',
    parent: '2.1',
    name: '10 Key Proficiency',
    value: 5*5
},
{
    id: '3.3',
    parent: '2.2',
    name: 'First Keys Billed',
    value: 3*5
},
{
    id: '3.4',
    parent: '2.2',
    name: 'Summary Bills',
    value: 3*3
},
{
    id: '3.5',
    parent: '2.3',
    name: 'Build Templates',
    value: 4*5
},
{
    id: '3.6',
    parent: '2.3',
    name: 'Customer Support Requests',
    value: 5*3
},
{
    id: '3.7',
    parent: '2.6',
    name: 'HTML',
    value: 5*4
},
{
    id: '3.8',
    parent: '2.6',
    name: 'Typescript',
    value: 5*4
}
];

// 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'
    },
    subtitle: {
        text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
    },
    series: [{
        type: "sunburst",
        data: data,
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
          ...