Search results

Data Binding in React TreeMap component

26 Nov 2021 / 2 minutes to read

The TreeMap control supports data binding using the dataSource property.

Populate data

The dataSource property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the dataSource property.

Flat collection

The following code shows, how to bind a flat collection as data source to the TreeMap control.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';

class App extends React.Component {
render() {
  return ( <TreeMapComponent id='treemap'
        dataSource={[
            {State:"United States", GDP:17946, percentage:11.08, Rank:1},
            {State:"China", GDP:10866, percentage: 28.42, Rank:2},
            {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
            {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
            {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
            {State:"France", GDP:2421, percentage:-9.69, Rank:6},
            {State:"India", GDP:2073, percentage:13.65, Rank:7},
            {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
            {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
            {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
        ]}
        weightValuePath='GDP'
        leafItemSettings={{
            labelPath: 'State'
        }}>
    </TreeMapComponent> );
 }
}
ReactDOM.render(<App />, document.getElementById('treemap'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
class App extends React.Component {
    render() {
        return (<TreeMapComponent id='treemap' dataSource={[
            { State: "United States", GDP: 17946, percentage: 11.08, Rank: 1 },
            { State: "China", GDP: 10866, percentage: 28.42, Rank: 2 },
            { State: "Japan", GDP: 4123, percentage: -30.78, Rank: 3 },
            { State: "Germany", GDP: 3355, percentage: -5.19, Rank: 4 },
            { State: "United Kingdom", GDP: 2848, percentage: 8.28, Rank: 5 },
            { State: "France", GDP: 2421, percentage: -9.69, Rank: 6 },
            { State: "India", GDP: 2073, percentage: 13.65, Rank: 7 },
            { State: "Italy", GDP: 1814, percentage: -12.45, Rank: 8 },
            { State: "Brazil", GDP: 1774, percentage: -27.88, Rank: 9 },
            { State: "Canada", GDP: 1550, percentage: -15.02, Rank: 10 }
        ]} weightValuePath='GDP' leafItemSettings={{
            labelPath: 'State'
        }}>
    </TreeMapComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('treemap'));

Hierarchical collection

The following code shows, how to bind a hierarchical collection as data source to the TreeMap control.

Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent, LevelDirective, LevelsDirective } from '@syncfusion/ej2-react-treemap';

class App extends React.Component {
render() {
  return ( <TreeMapComponent id='treemap'
       dataSource={[
            {
                    { Name: "United States", Sales: 28092, Expense: 26000, States: [
                    { Name: "New York", Sales: 2353, Expense: 2000 },
                    { Name: "Los Angeles", Sales: 3453, Expense: 3000 },
                    { Name: "San Francisco", Sales: 8456, Expense: 8000 },
                    { Name: "Chicago", Sales: 6785, Expense: 7000 },
                    { Name: "Miami", Sales: 7045, Expense: 6000 },
                ]
            },
            {
                Name: "Canada", Sales: 19240, Expense: 18500, States: [
                    { Name: "Toronto", Sales: 7045, Expense: 7000 },
                    { Name: "Vancouver", Sales: 4352, Expense: 4000 },
                    { Name: "Winnipeg", Sales: 7843, Expense: 7500 }
                ]
            },
            {
                Name: "Mexico",Sales: 16980, Expense: 14500, States: [
                    { Name: "Mexico City", Sales: 7843, Expense: 6500, States1: [
                        { Name: "Cancun1", Sales: 6683, Expense: 6000 },
                        { Name: "Acapulco1", Sales: 2454, Expense: 2000 }
                    ]
                    },
                    { Name: "Cancun", Sales: 6683, Expense: 6000 },
                    { Name: "Acapulco", Sales: 2454, Expense: 2000 }
                ]
            },
        ]}
        weightValuePath='Sales'
        leafItemSettings={{
            labelPath: 'Name'
        }}>
        <LevelsDirective>
            <LevelDirective groupPath='States' groupGap={3} showHeader={true} headerHeight={25} showLabels={true} headerTemplate='headertemplate' labelTemplate: 'labeltemplate' />
        </LevelsDirective>
    </TreeMapComponent> );
 }
}
ReactDOM.render(<App />, document.getElementById('treemap'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent, LevelDirective, LevelsDirective } from '@syncfusion/ej2-react-treemap';
class App extends React.Component {
    render() {
        return (<TreeMapComponent id='treemap' dataSource={[
            {},
            { Name: "United States", Sales: 28092, Expense: 26000, States: [
                    { Name: "New York", Sales: 2353, Expense: 2000 },
                    { Name: "Los Angeles", Sales: 3453, Expense: 3000 },
                    { Name: "San Francisco", Sales: 8456, Expense: 8000 },
                    { Name: "Chicago", Sales: 6785, Expense: 7000 },
                    { Name: "Miami", Sales: 7045, Expense: 6000 },
                ]
            },
            {
                Name: "Canada", Sales: 19240, Expense: 18500, States: [
                    { Name: "Toronto", Sales: 7045, Expense: 7000 },
                    { Name: "Vancouver", Sales: 4352, Expense: 4000 },
                    { Name: "Winnipeg", Sales: 7843, Expense: 7500 }
                ]
            },
            {
                Name: "Mexico", Sales: 16980, Expense: 14500, States: [
                    { Name: "Mexico City", Sales: 7843, Expense: 6500, States1: [
                            { Name: "Cancun1", Sales: 6683, Expense: 6000 },
                            { Name: "Acapulco1", Sales: 2454, Expense: 2000 }
                        ]
                    },
                    { Name: "Cancun", Sales: 6683, Expense: 6000 },
                    { Name: "Acapulco", Sales: 2454, Expense: 2000 }
                ]
            },
        ]} weightValuePath='Sales' leafItemSettings={{
            labelPath: 'Name'
        }}>
        <LevelsDirective>
            <LevelDirective groupPath='States' groupGap={3} showHeader={true} headerHeight={25} showLabels={true} headerTemplate='headertemplate' labelTemplate/> 'labeltemplate' />
        </LevelsDirective>
    </TreeMapComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('treemap'));