TreeMap

Array of series objects

Result

Loading...

Live Editor

const seriesData = [
	{
		id: '1',
		value: 450,
		name: 'LPL',
	},
	{
		id: '2',
		value: 150,
		name: 'Schwab',
	},
	{
		id: '3',
		value: 150,
		name: 'Unknown',
	},
	{
		id: '4',
		value: 150,
		name: 'TD Ameritrade',
	},
	{
		id: '5',
		value: 5,
		name: 'Client Access',
	},
	{
		id: '6',
		value: 5,
		name: 'Another name',
	},
	{
		id: '7',
		value: 5,
		name: '7 Another name',
	},
	{
		id: '8',
		value: 5,
		name: '8 name',
	},
	{
		id: '9',
		value: 5,
		name: '9 name',
	},
	{
		id: '10',
		value: 5,
		name: '10 name',
	},
	{
		id: '11',
		value: 5,
		name: '11 name',
	},
	{
		id: '12',
		value: 5,
		name: '12 name',
	},
	{
		id: '13',
		value: 5,
		name: '13 name',
	},
	{
		id: '14',
		value: 4,
		name: '14 name',
	},
	{
		id: '15',
		value: 5,
		name: '15 name',
	},
	{
		id: '16',
		value: 5,
		name: '16 name',
	},
	{
		id: '17',
		value: 5,
		name: '17 name',
	},
	{
		id: '18',
		value: 5,
		name: '18 name',
	},
];

render(<TreeMap id="demo-series-data-component" title="Chart Title" data={seriesData} />);

Flat array of numerical values

Result

Loading...

Live Editor

<TreeMap
	id="demo-series-data-flat-component"
	title="Chart Title"
	data={[450, 150, 150, 150, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 5, 5, 5, 5]}
/>

Update Highcharts modules

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

import Highcharts from 'highcharts';
import TreeMap from 'highcharts/modules/treemap';

TreeMap(Highcharts);

Props