Treemap Chart

Visualize hierarchical data as nested rectangles with Chart.ts treemaps. Automatic squarified layout, color coding by category or value, drill-down navigation, and SVG rendering. Works with any JavaScript framework.

$npm install @chartts/core
example.tsx
import { treemap } from "@chartts/core"

const svg = treemap({
  data: [
    { name: "Technology", value: 45, children: [
      { name: "Apple", value: 22 },
      { name: "Microsoft", value: 18 },
      { name: "Google", value: 5 },
    ]},
    { name: "Finance", value: 30, children: [
      { name: "JPMorgan", value: 15 },
      { name: "Goldman", value: 15 },
    ]},
    { name: "Healthcare", value: 25 },
  ],
  label: "name",
  value: "value",
})

Features

Squarified layout algorithm
Hierarchical nesting with drill-down
Color coding by category or value
Labels with automatic size fitting
Tooltip with custom content
SVG rendering at any resolution
Tailwind CSS on cells and labels
Read the DocsSee DemosExamples