The tree map control supports data binding using the dataSource property.
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 tree map control.
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.
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'));