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} />);

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]} />

<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]}
/>

Props