How to Create Treemap Chart in React 18 with Recharts

Author: | Published: | Updated: | Category: React JS

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-app

Once the installation process is done, move in to the project folder:

cd my-react-app

Install 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 bootstrap --legacy-peer-deps

Make 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 ReTreemapChart

Create 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 start

The above command will invoke the react server and serve the project in your default web browser.

http://localhost:3000

How to Create Treemap Chart in React with Recharts

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.

Loved this? Share it with others:
Digamber - Author positronX.io

An experienced full-stack developer with a passion for providing top-notch web experiences, proficient in developing both the front and back ends of a web application by utilizing the expertise of HTML, CSS, JavaScript, PHP, and Python.