Sunburst

A sunburst chart is a data visualization that displays hierarchical data in a radial, multi-level format. It resembles a sun with a central circle and radiating "rays" that are further divided into rings, each representing a level in the hierarchy. Sunburst charts are excellent for showing how different categories and subcategories contribute to the whole, offering a clear visual representation of part-to-whole relationships within the data.

Result

Loading...

Live Editor

<SunburstChart
	title="Sunburst"
	subtitle="Chart"
	data={Array.from({ length: 18 }, (_, i) => ({
		name: `Item ${i + 1}`,
		id: `item-${i + 1}`,
		children: [
			{
				name: 'Sub item 1',
				id: `sub-item-${i + 1}-1`,
				value: 10,
			},
			{
				name: 'Sub item 2',
				id: `sub-item-${i + 1}-2`,
				value: 10,
			},
			{
				name: 'Sub item 3',
				id: `sub-item-${i + 1}-3`,
				value: 10,
			},
		],
	}))}
/>

Update Highcharts modules

Sunburst is not included in the default Highcharts bundle. You will need to extend Highcharts to use the Sunburst module.

import Highcharts from 'highcharts';
import Sunburst from 'highcharts/modules/sunburst';

Sunburst(Highcharts);

Props