||

Treemap Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Hierarchical treemaps sized by value — clear at a glance, beautiful by default

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/treemap-chart

Usage

The treemap chart is composible. <EvilTreemapChart> is the container: you pass hierarchical or flat tile data (TreemapNode[]) plus a chartConfig whose keys match each tile’s display name (nameKey). Compose <Tiles /> with behavior flags (isClickable, glowingTiles, showLabels), then <Tooltip /> and <Legend />, optionally with backgroundVariant on the root — only the slots you need.

import {
  EvilTreemapChart,
  Tiles,
  Tooltip,
  Legend,
} from "@/components/evilcharts/charts/treemap-chart";
<EvilTreemapChart config={chartConfig} data={treemapData} backgroundVariant="dots">
  <Tiles isClickable glowingTiles={["mobile"]} showLabels />
  <Tooltip />
  <Legend isClickable />
</EvilTreemapChart>

Interactive Selection

Add isClickable on <Tiles /> (and on <Legend />) so clicks select a tile. Use onSelectionChange on <EvilTreemapChart> — it receives { dataKey, value } | null, where dataKey is the tile name from nameKey and value comes from dataKey (defaults to cumulative size for nested nodes):

<EvilTreemapChart
  config={chartConfig}
  data={treemapData}
  onSelectionChange={(selection) => {
    if (selection) {
      console.log("Selected:", selection.dataKey, selection.value);
    } else {
      console.log("Deselected");
    }
  }}
>
  <Tiles isClickable />
  <Legend isClickable />
  <Tooltip />
</EvilTreemapChart>

Loading State

isLoading='true'

Examples

Glowing Tiles

glowing

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

EvilTreemapChart

The root container. It owns hierarchical data (TreemapNode[]), shared tile selection state, loading skeleton behavior, gradient fills, and aspect ratio defaults. Compose visual slots as children.

PropTypeDefaultDescription
config*Record<string, ChartConfig[string]>–

Configuration keyed by tile name (nameKey). Each key drives gradient colors and legend labels for that leaf or series.

data*TreemapNode[]–

Nested or flat hierarchical data; each node should expose name (or override with nameKey) and typically size (or override with dataKey) plus optional nested children.

dataKeystring"size"

Numeric field sized by each treemap rectangle.

nameKeystring"name"

String field used as the stable tile identifier and tooltip / legend identity.

children*ReactNode–

Composed parts — <Tiles />, <Tooltip />, <Legend />, plus forwarded chart slots from Recharts controlled through treemapProps.

classNamestring–

Additional CSS classes to apply to the chart container.

aspectRationumber4/3

Treemap rectangle aspect ratio forwarded to Recharts <Treemap />.

strokeWidthnumber2

Pixel stroke separating adjacent tiles (stroke stays tied to --background).

backgroundVariantBackgroundVariant–

Draws <ChartBackground /> behind the treemap rectangles (same pattern as bar and scatter charts).

defaultSelectedTilestring | nullnull

Pre-selects one tile (nameKey value).

onSelectionChange(selection: { dataKey: string; value: number } | null) => void–

Fired after a clickable tile / legend toggle — null clears selection.

isLoadingbooleanfalse

Displays the animated mosaic skeleton generated inside the SVG while data resolves.

treemapPropsOmit<TreemapProps, "data" | "dataKey">–

Additional props forwarded to the underlying Recharts Treemap component (data, dataKey, content, gradients, strokes, naming keys, and sizing already owned by EvilTreemap internals). Read the Recharts Treemap documentation for available escape hatches.

Tiles

A configuration slot consumed by <EvilTreemapChart /> — renders nothing alone. Toggle click behavior, glowing filters, and in-tile labels for every rectangle.

PropTypeDefaultDescription
isClickablebooleanfalse

When true, tile clicks toggle selection. Dimming applies whenever a tile is selected (legend, default, or click).

glowingTilesstring[][]

Tile names (nameKey values) rendered with feathered glow filters sourced from defs.

showLabelsbooleantrue

Auto labels inside tiles large enough (> 36×20 px guard) sourced from chart config labels when present.

Tooltip

The hover tooltip. Hidden automatically while the chart is loading; uses hideLabel.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Tooltip surface preset.

roundnesssm|md|lg|xl"lg"

Tooltip border radius.

defaultIndexnumber–

Forces an initial hovered tile index so the tooltip is visible immediately.

Legend

Tile legend keyed by each config series. Mirrors treemap gradients with optional click-to-select syncing with clickable tiles.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

Legend marker shape presets.

alignleft|center|right"center"

Horizontal legend alignment.

verticalAligntop|middle|bottom"bottom"

Vertical placement relative to the chart.

isClickablebooleanfalse

Legend entries toggle shared selection; dimming follows selectedTile even when <Tiles /> is not clickable.

Did you like the content?