TreemapChart

Live preview

Loading example…

Squarified treemap: areas proportional to value, nested groups with a header band, click a group to open it (breadcrumb to go back). Each branch wears one palette hue; its children are spread over lighter and darker tints of it. Labels only show where they fit.

Import

import { TreemapChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/treemap-chart.

Usage

<TreemapChart
  title="Ventas por categoría y producto"
  data={salesByCategory}
  valueFormat="currency"
  height={380}
  depth={2}
  drillDown
  breadcrumb
  legend
  tooltip
  gap={3}
  radius={6}
  sort
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the drawing and caption of the data table.
`data` *	`HierarchyDatum`		Root of the tree; its name is the first breadcrumb item.
`height`	`number \| "fill"`	`360`	Height of the drawing in pixels.
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`
`depth`	`number`	`2`	Levels drawn at once below the open node; deeper ones appear after drilling.
`drillDown`	`boolean`	`true`	Click (or Enter) on a group opens it.
`breadcrumb`	`boolean`	`true`	Path of the open node above the drawing.
`legend`	`boolean`	`true`	Read-only legend of the open level’s branches.
`tooltip`	`boolean`	`true`
`gap`	`number`	`3`	Gap between cells in pixels.
`radius`	`number`	`6`	Corner radius of the cells.
`sort`	`boolean`	`true`	Largest first (default) or data order.
`animate`	`boolean`	`true`
`loading`	`boolean`
`labels`	`Partial<HierarchyLabels>`
`onFocusChange`	`((node: HierarchyNode) => void)`		Called with the open node after drilling in or out.
`onNodeClick`	`((node: HierarchyNode) => void)`		Click on a cell that cannot be opened (a leaf).
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/treemap-chart/treemap-chart.tsx