Data binding in React Treemap component

21 Jun 202310 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.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
  return ( <TreeMapComponent 
        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> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
  return ( <TreeMapComponent 
        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> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

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';
export function App() {
  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}
        />
        <LevelDirective
          groupPath="States1"
          groupGap={3}
          showHeader={true}
          headerHeight={25}
          showLabels={true}
        />
      </LevelsDirective>
    </TreeMapComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);