React Treemap

Visualize hierarchical data as nested rectangles with a React treemap. Automatic layout algorithm, color coding by category, drill-down support, and Tailwind CSS styling on every cell.

$npm install @chartts/react
example.tsx
import { TreemapChart } from "@chartts/react"

export function DiskUsage() {
  const data = [
    { name: "Documents", value: 12400, category: "files" },
    { name: "Photos", value: 8200, category: "media" },
    { name: "Videos", value: 24800, category: "media" },
    { name: "Code", value: 6100, category: "files" },
    { name: "Music", value: 3400, category: "media" },
  ]

  return (
    <TreemapChart
      data={data}
      label="name"
      value="value"
      className="h-72"
    />
  )
}

Features

Automatic squarified layout algorithm
Hierarchical nesting support
Color coding by category or value
Labels with automatic truncation
Drill-down navigation
Tailwind className on cells and labels
Under 3kb tree-shaken
Read the DocsSee DemosExamples