How to Create Treemap Chart in React with Recharts
In this tutorial, you will learn how to build a treemap chart component using React functional component, Recharts, and Bootstrap libraries.
A treemap chart offers a straightforward way to visualize hierarchical data through rectangle patterns. Every rectangle represents a particular category or subcategory in relation to the volume of the data.
The treemap chart permits facile comparison of the comparable sizes of the categories, and the hierarchical structure of the chart allows for the quest of the relationships between the categories.
In this guide, we will define certain steps which will help you understand how to implement treemap chart in react function component using third-party chart and UI modules.
Creating a treemap chart component in React can be a valuable tool for visualizing hierarchical data and communicating complex information to users.
To create a treemap chart component in React, several steps need to be followed, including installing and importing the necessary packages, defining the component, and rendering the chart using the external libraries.
React Recharts Simple Treemap Chart Example
- Step 1: Setup React Project
- Step 2: Install External Packages
- Step 3: Make New Component
- Step 4: Create Treemap Chart Component
- Step 5: Update Main Entry
- Step 6: Run App on Browser
Setup React Project
You have to install the node js, visit to the official website : https://nodejs.org/en/.
Open your terminal and head over to the folder where you want to create a new project.
npx create-react-app my-react-appOnce the installation process is done, move in to the project folder:
cd my-react-appInstall External Packages
You now have a basic React project installed and utterly ready to be developed further.
Next, you have to install the two libraries using the npm or yarn.
npm i recharts bootstrapMake New Component
Now, you will have to create a new folder name it components/, and also create the ReTreemapChart.js.
Import React from ‘react’ package. Define a simple function by the name of the ReTreemapChart at the same type export to the default.
import React from 'react'
function ReTreemapChart() {
return (
<div></div>
)
}
export default ReTreemapChartCreate Treemap Chart Component
We are now going to integrate Treemap in a function component and try to visualize the hierarchical data.
Add following code within the components/ReTreemapChart.js file.
import React from "react";
import { Treemap } from "recharts";
function ReTreemapChart() {
const data = [
{
name: "axis",
children: [
{ name: "Axes", size: 1302 },
{ name: "Axis", size: 24593 },
{ name: "AxisGridLine", size: 652 },
{ name: "AxisLabel", size: 636 },
{ name: "CartesianAxes", size: 6703 },
],
},
{
name: "controls",
children: [
{ name: "AnchorControl", size: 2138 },
{ name: "ClickControl", size: 3824 },
{ name: "Control", size: 1353 },
{ name: "ControlList", size: 4665 },
{ name: "DragControl", size: 2649 },
{ name: "ExpandControl", size: 2832 },
{ name: "HoverControl", size: 4896 },
{ name: "IControl", size: 763 },
{ name: "PanZoomControl", size: 5222 },
{ name: "SelectionControl", size: 7862 },
{ name: "TooltipControl", size: 8435 },
],
},
{
name: "data",
children: [
{ name: "Data", size: 20544 },
{ name: "DataList", size: 19788 },
{ name: "DataSprite", size: 10349 },
{ name: "EdgeSprite", size: 3301 },
{ name: "NodeSprite", size: 19382 },
{
name: "render",
children: [
{ name: "ArrowType", size: 698 },
{ name: "EdgeRenderer", size: 5569 },
{ name: "IRenderer", size: 353 },
{ name: "ShapeRenderer", size: 2247 },
],
},
{ name: "ScaleBinding", size: 11275 },
{ name: "Tree", size: 7147 },
{ name: "TreeBuilder", size: 9930 },
],
},
{
name: "events",
children: [
{ name: "DataEvent", size: 7313 },
{ name: "SelectionEvent", size: 6880 },
{ name: "TooltipEvent", size: 3701 },
{ name: "VisualizationEvent", size: 2117 },
],
},
{
name: "legend",
children: [
{ name: "Legend", size: 20859 },
{ name: "LegendItem", size: 4614 },
{ name: "LegendRange", size: 10530 },
],
},
{
name: "operator",
children: [
{
name: "distortion",
children: [
{ name: "BifocalDistortion", size: 4461 },
{ name: "Distortion", size: 6314 },
{ name: "FisheyeDistortion", size: 3444 },
],
},
{
name: "encoder",
children: [
{ name: "ColorEncoder", size: 3179 },
{ name: "Encoder", size: 4060 },
{ name: "PropertyEncoder", size: 4138 },
{ name: "ShapeEncoder", size: 1690 },
{ name: "SizeEncoder", size: 1830 },
],
},
{
name: "filter",
children: [
{ name: "FisheyeTreeFilter", size: 5219 },
{ name: "GraphDistanceFilter", size: 3165 },
{ name: "VisibilityFilter", size: 3509 },
],
},
{ name: "IOperator", size: 1286 },
{
name: "label",
children: [
{ name: "Labeler", size: 9956 },
{ name: "RadialLabeler", size: 3899 },
{ name: "StackedAreaLabeler", size: 3202 },
],
},
{
name: "layout",
children: [
{ name: "AxisLayout", size: 6725 },
{ name: "BundledEdgeRouter", size: 3727 },
{ name: "CircleLayout", size: 9317 },
{ name: "CirclePackingLayout", size: 12003 },
{ name: "DendrogramLayout", size: 4853 },
{ name: "ForceDirectedLayout", size: 8411 },
{ name: "IcicleTreeLayout", size: 4864 },
{ name: "IndentedTreeLayout", size: 3174 },
{ name: "Layout", size: 7881 },
{ name: "NodeLinkTreeLayout", size: 12870 },
{ name: "PieLayout", size: 2728 },
{ name: "RadialTreeLayout", size: 12348 },
{ name: "RandomLayout", size: 870 },
{ name: "StackedAreaLayout", size: 9121 },
{ name: "TreeMapLayout", size: 9191 },
],
},
{ name: "Operator", size: 2490 },
{ name: "OperatorList", size: 5248 },
{ name: "OperatorSequence", size: 4190 },
{ name: "OperatorSwitch", size: 2581 },
{ name: "SortOperator", size: 2023 },
],
},
];
return (
<div>
<Treemap
width={500}
height={250}
data={data}
dataKey="size"
aspectRatio={4 / 3}
stroke="#fff"
fill="#8884d8"
/>
</div>
);
}
export default ReTreemapChart;Update Main Entry
We will now open the App.js file, which is the main entry point for the application. Hence, import the React treemap component as suggested below.
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReTreemapChart from "./components/ReTreemapChart";
function App() {
return (
<div className="container mt-4">
<h2 className="mb-4">React Js Treemap Chart Example</h2>
<ReTreemapChart />
</div>
);
}
export default App;Run App on Browser
Start the development server by running the command:
npm startThe above command will invoke the react server and serve the project in your default web browser.
http://localhost:3000
Conclusion
It is also essential to consider the design and layout of the chart, including the colors, labels, and tooltips, to ensure that the data is presented in a clear and accessible manner.
Additionally, incorporating features such as interactivity and responsiveness can enhance the user experience and make the chart more engaging.
By following these steps and best practices, developers can create a powerful and customizable treemap chart component in React that can be integrated into various applications and provide valuable insights into complex data.
