Highcharts Demo

author(s): Torstein Hønsi

by praveen_kr

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': 'Market'
	}, {
		'id': '1.1',
		'parent': '0.0',
		'name': 'US'
	}, {
		'id': '1.2',
		'parent': '0.0',
		'name': 'Americas Non-US'
	}, {
		'id': '1.3',
		'parent': '0.0',
		'name': 'Asia Pacific'
	}, {
		'id': '1.4',
		'parent': '0.0',
		'name': 'EMEA'
	},
	{
		'id': '2.1',
		'parent': '1.1',
		'name': 'Finance',
		'value':20
	},
	{
		'id': '2.2',
		'parent': '1.1',
		'name': 'Others',
		'value':80
	},
	{
		'id': '2.3',
		'parent': '1.2',
		'name': 'Finance',
		'value':30
	},
	{
		'id': '2.4',
		'parent': '1.2',
		'name': 'Others',
		'value':70
	},
	{
		'id': '2.5',
		'parent': '1.3',
		'name': 'Finance',
		'value':40
	},
	{
		'id': '2.6',
		'parent': '1.3',
		'name': 'Others',
		'value':60
	},
	{
		'id': '2.7',
		'parent': '1.4',
		'name': 'Finance',
		'value':10
	},
	{
		'id': '2.8',
		'parent': '1.4',
		'name': 'Others',
		'value':90
	}
	];







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


	Highcharts.chart('container', {

		chart: {
			height: '100%'
		},

		title: {
			text: 'Headcount'
		},
		subtitle: {
			text: 'Source <href="https://en.wikipedia.org/wiki/List_of_countries_by_population_(United_Nations)">Wikipedia</a>'
		},
		series: [{
			type: "sunburst",
			data: data,
			allowDrillToNode: false,
			cursor: 'pointer',
			dataLabels: {
				format: '{point.name}',
				filter: {
					property: 'innerArcLength',
					operator: '>',
					value: 16
				}
			},
			levels: [{
				level: 1,
				levelIsConstant: false,
				dataLabels: {
					filter: {
						property: 'outerArcLength',
						operator: '>',
						value: 64
					}
				}
			}, {
				level: 2,
				colorByPoint: true,
        levelSize: {
                unit: 'percentage',
                value: 10
            },
			},
			{
				level: 3,
        visible:false,
        levelSize: {
                unit: 'percentage',
                value: 30
            },
				colorVariation:...