Leaf item in React Treemap component
3 Mar 202321 minutes to read
A leaf item defines a visualized data element and does not contain child nodes but contains parent node if the levels are specified in the TreeMap.
Leaf label
Label is represented by item name or value. Label will be appeared by specifying the labelPath property and customize the label style using the labelStyle property.
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',
labelStyle: {
color: '#000000'
},
border: {
color: '#000000',
width: 0.5
}
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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',
labelStyle: {
color: '#000000'
},
border: {
color: '#000000',
width: 0.5
}
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Label position and format
Positioning the leaf item label using the labelPosition property and the text format can be customized by specifying data source properties name in the labelFormat property.
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',
labelPosition:'TopCenter',
labelFormat: '${State}<br>$${GDP} Trillion<br>(${percentage} %)',
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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',
labelPosition:'TopCenter',
labelFormat: '${State}<br>$${GDP} Trillion<br>(${percentage} %)',
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Label template and position
Specifies the template of leaf item label and position of the template to be customized using labelTemplate and templatePosition properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
export function App() {
return ( <TreeMapComponent
dataSource={[
{ Sport: "Swimming", Gold: 16, GameImage: 'swimming.svg', ItemHeight: "180px", ItemWidth: "180px" },
{ Sport: "Athletics", Gold: 13, GameImage: 'athletics.svg', ItemHeight: "70px", ItemWidth: "70px" },
{ Sport: "Gymnastics", Gold: 4, GameImage: 'gymnastics.svg', ItemHeight: "80px", ItemWidth: "80px" },
{ Sport: "Cycling", Gold: 2, GameImage: 'cycling.svg', ItemHeight: "50px", ItemWidth: "50px" },
{ Sport: "Wrestling", Gold: 2, GameImage: 'wrestling.svg', ItemHeight: "60px", ItemWidth: "50px" },
{ Sport: "Basketball", Gold: 2, GameImage: 'basketball.svg', ItemHeight: "50px", ItemWidth: "50px" },
{ Sport: "Boxing", Gold: 1, GameImage: 'boxing.svg', ItemHeight: "40px", ItemWidth: "30px" },
{ Sport: "Tennis", Gold: 1, GameImage: 'tennis.svg', ItemHeight: "40px", ItemWidth: "40px" },
{ Sport: "Judo", Gold: 1, GameImage: 'judo.svg', ItemHeight: "40px", ItemWidth: "40px" },
{ Sport: "Rowing", Gold: 1, GameImage: 'rowing.svg', ItemHeight: "40px", ItemWidth: "40px" },
{ Sport: "Shooting", Gold: 1, GameImage: 'shooting.svg', ItemHeight: "40px", ItemWidth: "40px" },
{ Sport: "Triathlon", Gold: 1, GameImage: 'triathlon.svg', ItemHeight: "40px", ItemWidth: "40px" },
{ Sport: "Water polo", Gold: 1, GameImage: 'water-polo.svg', ItemHeight: "40px", ItemWidth: "40px" }
]}
weightValuePath= 'Gold'
leafItemSettings= {{
labelPath: 'Sport',
fill: '#993399',
templatePosition: 'Center',
labelTemplate: '<div style="pointer-events: none;"><img src="https://ej2.syncfusion.com/react/demos/src/treemap/image/{{:GameImage}}"' +
' style="height:{{:ItemHeight}};width:{{:ItemWidth}};"></img></div>'
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Item gap
The gap property is used to separate an item from another item. Each item rectangle is split into equal space with specified gap.
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',
gap:20
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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',
gap:20
}}>
</TreeMapComponent> );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);