Treemap

Hierarchies as areas, with drill-down. Pro · Charts and analytics › Shares and composition

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add treemap

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Treemap } from 'valyro-ui-pro';

Prop	Type	Default
`data` *	`TreemapNode[]`		Top-level nodes; tile area follows each leaf's `value` (groups: the sum of their children).
`height`	`number`	`360`	Plot height in px; width follows the container. Default 360.
`colorBy`	`'group' \| 'value'`	`'group'`	`group`: each top-level node gets a palette color. `value`: one color, darker for larger values.
`color`	`string`	`'var(--ui-chart-1)'`	Color of the `value` scale. Default `--ui-chart-1`.
`depth`	`number`	`2`	Levels drawn at once: groups with a header and their children inside. Default 2.
`drillDown`	`boolean`	`true`	Click or Enter on a tile zooms into its group; a breadcrumb leads back. Default true.
`onNodeClick`	`(node: TreemapNode, path: TreemapNode[]) => void`		Called on click / Enter with the node and its ancestors (outermost first).
`valueFormatter`	`ValueFormatter`		Formats values on the tiles, in the tooltip and the data table.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<TreemapLabels>`		Overrides for the built-in strings.
`loading`	`boolean`	`false`	Shows a placeholder of the same height while data loads.
`actions`	`ReactNode`		Content at the end of the breadcrumb row (with `drillDown`), e.g. a hint or the selected path.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Donut Chart — Donut charts
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Heatmap — Heatmaps