Treemap Chart

Hierarchical treemap for nested data visualization.

"use client"

import { TreemapChart } from "@/components/ui/charts"

// Market capitalization by sector and industry
// Colors are derived from CSS variables (--chart-1 through --chart-5)
const data = {
  name: "Market",
  children: [
    {
      name: "Technology",
      children: [
        { name: "Apple", value: 185 },
        { name: "Microsoft", value: 170 },
        { name: "Nvidia", value: 120 },
        { name: "Google", value: 95 },
        { name: "Meta", value: 65 },
        { name: "Tesla", value: 55 },
      ],
    },
    {
      name: "Healthcare",
      children: [
        { name: "UnitedHealth", value: 85 },
        { name: "J&J", value: 75 },
        { name: "Eli Lilly", value: 70 },
        { name: "Pfizer", value: 45 },
        { name: "Merck", value: 40 },
      ],
    },
    {
      name: "Finance",
      children: [
        { name: "Berkshire", value: 90 },
        { name: "JPMorgan", value: 75 },
        { name: "Visa", value: 55 },
        { name: "Mastercard", value: 45 },
      ],
    },
    {
      name: "Energy",
      children: [
        { name: "Exxon", value: 65 },
        { name: "Chevron", value: 50 },
        { name: "Shell", value: 35 },
      ],
    },
    {
      name: "Consumer",
      children: [
        { name: "Amazon", value: 110 },
        { name: "Walmart", value: 55 },
        { name: "Costco", value: 40 },
        { name: "P&G", value: 35 },
      ],
    },
  ],
}

export function TreemapChartDemo() {
  return (
    <div className="w-full">
      <TreemapChart
        data={data}
        width={400}
        height={320}
        showLabels
        labelMinSize={30}
        paddingInner={2}
      />
    </div>
  )
}

About

The Treemap Chart displays hierarchical data as nested rectangles sized by value.

Installation


pnpm dlx shadcn@latest add https://ui.simplifyingai.com/r/treemap-chart.json

Usage

import { TreemapChart } from "@/components/ui/charts"
 
const data = {
  name: "root",
  children: [
    { name: "Category A", value: 100 },
    { name: "Category B", value: 80 },
    {
      name: "Category C",
      children: [
        { name: "C1", value: 30 },
        { name: "C2", value: 20 },
      ],
    },
  ],
}
 
export function Example() {
  return <TreemapChart data={data} showLabels />
}

API Reference

Prop	Type	Default	Description
data	TreemapNode	required	Hierarchical data
tile	"squarify" \| "binary" \| "slice" \| "dice"	"squarify"	Tiling algorithm
padding	number	1	Cell padding
showLabels	boolean	true	Show cell labels

Examples

Portfolio Allocation

Investment portfolio breakdown by asset class.

"use client"

import { TreemapChart } from "@/components/ui/charts"

// Investment portfolio allocation
const data = {
  name: "Portfolio",
  children: [
    {
      name: "Stocks",
      children: [
        { name: "US Large Cap", value: 35, color: "#1e40af" },
        { name: "US Small Cap", value: 15, color: "#2563eb" },
        { name: "International", value: 20, color: "#3b82f6" },
        { name: "Emerging", value: 10, color: "#60a5fa" },
      ],
    },
    {
      name: "Bonds",
      children: [
        { name: "Government", value: 8, color: "#1e40af" },
        { name: "Corporate", value: 5, color: "#2563eb" },
        { name: "Municipal", value: 3, color: "#3b82f6" },
      ],
    },
    {
      name: "Alternatives",
      children: [
        { name: "Real Estate", value: 6, color: "#1e40af" },
        { name: "Commodities", value: 4, color: "#2563eb" },
        { name: "Crypto", value: 2, color: "#3b82f6" },
      ],
    },
    {
      name: "Cash",
      children: [
        { name: "Money Market", value: 3, color: "#93c5fd" },
        { name: "Savings", value: 2, color: "#bfdbfe" },
      ],
    },
  ],
}

export function TreemapChartPortfolioDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <TreemapChart
        data={data}
        width={420}
        height={350}
        showLabels
        labelMinSize={30}
      />
    </div>
  )
}

Disk Usage

File system storage visualization by folder.

"use client"

import { TreemapChart } from "@/components/ui/charts"

// Disk usage by folder
const data = {
  name: "Disk",
  children: [
    {
      name: "Applications",
      children: [
        { name: "Xcode", value: 45, color: "#1e40af" },
        { name: "Chrome", value: 12, color: "#2563eb" },
        { name: "Slack", value: 8, color: "#3b82f6" },
        { name: "VS Code", value: 6, color: "#60a5fa" },
        { name: "Spotify", value: 4, color: "#93c5fd" },
      ],
    },
    {
      name: "Documents",
      children: [
        { name: "Projects", value: 25, color: "#1e40af" },
        { name: "Archives", value: 18, color: "#2563eb" },
        { name: "Downloads", value: 15, color: "#3b82f6" },
        { name: "Screenshots", value: 5, color: "#60a5fa" },
      ],
    },
    {
      name: "Media",
      children: [
        { name: "Videos", value: 85, color: "#1e40af" },
        { name: "Photos", value: 55, color: "#2563eb" },
        { name: "Music", value: 30, color: "#3b82f6" },
      ],
    },
    {
      name: "System",
      children: [
        { name: "Cache", value: 12, color: "#1e40af" },
        { name: "Logs", value: 5, color: "#2563eb" },
        { name: "Other", value: 8, color: "#3b82f6" },
      ],
    },
  ],
}

export function TreemapChartFilesizeDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <TreemapChart
        data={data}
        width={420}
        height={350}
        showLabels
        labelMinSize={28}
        tile="binary"
      />
    </div>
  )
}

Nested Hierarchy

Deep organizational structure with multiple levels.

"use client"

import { TreemapChart } from "@/components/ui/charts"

// Deep organizational hierarchy
const data = {
  name: "Company",
  children: [
    {
      name: "Engineering",
      children: [
        {
          name: "Frontend",
          children: [
            { name: "React", value: 12, color: "#1e40af" },
            { name: "Vue", value: 8, color: "#2563eb" },
            { name: "Angular", value: 5, color: "#3b82f6" },
          ],
        },
        {
          name: "Backend",
          children: [
            { name: "Node.js", value: 15, color: "#1e40af" },
            { name: "Python", value: 12, color: "#2563eb" },
            { name: "Go", value: 8, color: "#3b82f6" },
          ],
        },
        {
          name: "DevOps",
          children: [
            { name: "AWS", value: 6, color: "#60a5fa" },
            { name: "K8s", value: 5, color: "#93c5fd" },
          ],
        },
      ],
    },
    {
      name: "Product",
      children: [
        { name: "Design", value: 10, color: "#1e40af" },
        { name: "Research", value: 6, color: "#2563eb" },
        { name: "Analytics", value: 5, color: "#3b82f6" },
      ],
    },
    {
      name: "Operations",
      children: [
        { name: "HR", value: 8, color: "#1e40af" },
        { name: "Finance", value: 6, color: "#2563eb" },
        { name: "Legal", value: 4, color: "#3b82f6" },
      ],
    },
  ],
}

export function TreemapChartNestedDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <TreemapChart
        data={data}
        width={420}
        height={350}
        showLabels
        labelMinSize={25}
        paddingInner={3}
      />
    </div>
  )
}

Minimal

Simple quarterly sales breakdown.

"use client"

import { TreemapChart } from "@/components/ui/charts"

// Simple 2-level hierarchy
const data = {
  name: "Sales",
  children: [
    {
      name: "Q1",
      children: [
        { name: "Jan", value: 45, color: "#1e40af" },
        { name: "Feb", value: 38, color: "#2563eb" },
        { name: "Mar", value: 52, color: "#3b82f6" },
      ],
    },
    {
      name: "Q2",
      children: [
        { name: "Apr", value: 48, color: "#1e40af" },
        { name: "May", value: 55, color: "#2563eb" },
        { name: "Jun", value: 60, color: "#3b82f6" },
      ],
    },
    {
      name: "Q3",
      children: [
        { name: "Jul", value: 42, color: "#60a5fa" },
        { name: "Aug", value: 35, color: "#93c5fd" },
        { name: "Sep", value: 50, color: "#bfdbfe" },
      ],
    },
  ],
}

export function TreemapChartMinimalDemo() {
  return (
    <div className="mx-auto w-full max-w-sm">
      <TreemapChart
        data={data}
        width={340}
        height={280}
        showLabels
        labelMinSize={35}
      />
    </div>
  )
}

Notes

Treemap charts efficiently visualize hierarchical data using nested rectangles sized by value
The tile prop offers different layout algorithms: "squarify" creates more square-like shapes, while "binary", "slice", and "dice" create different rectangular patterns
Ideal for visualizing large datasets with hierarchical structure, such as disk usage, portfolio allocation, or organizational budgets
Rectangle size is proportional to the value, making it easy to compare relative magnitudes at a glance
Padding between cells improves readability and helps distinguish between hierarchy levels
Interactive hover states provide detailed information for each cell

Radar Chart Sunburst Chart

On This Page

About Installation Usage API Reference Examples Portfolio Allocation Disk Usage Nested Hierarchy Minimal Notes

Ask Your Database Anything with ChatPlotDB

Connect your database, ask questions in plain English, and get answers as charts, tables, and dashboards. No SQL required.