Recharts — Treemap and Custom Tooltip

Photo by Mika Baumeister on Unsplash

We can add charts easily to a React app with Recharts.

In this article, we’ll look at how to use it.

Treemap

We can add a treemap with the Treemap component.

For instance, we can write:

import React from "react";
import { Treemap } from "recharts";
const data = [
  {
    name: "axis",
    children: [
      { name: "Axes", size: 1302 },
      { name: "Axis", size: 24593 }
    ]
  },
  {
    name: "controls",
    children: [
      { name: "AnchorControl", size: 2138 },
      { name: "ClickControl", size: 3824 }
    ]
  },
  {
    name: "data",
    children: [
      { name: "Data", size: 20544 },
      { name: "DataList", size: 19788 },
      {
        name: "render",
        children: [
          { name: "ArrowType", size: 698 },
          { name: "EdgeRenderer", size: 5569 }
        ]
      },
      { name: "ScaleBinding", size: 11275 },
      { name: "Tree", size: 7147 },
      { name: "TreeBuilder", size: 9930 }
    ]
  },
  {
    name: "operator",
    children: [
      {
        name: "distortion",
        children: [
          { name: "BifocalDistortion", size: 4461 },
          { name: "Distortion", size: 6314 }
        ]
      },
      { name: "IOperator", size: 1286 },
      { name: "Operator", size: 2490 },
      { name: "OperatorList"…