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'));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'));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'));