Charts - Treemap

#Usage

import { ChartBreadcrumb, ChartCanvas, ChartCaption, ChartExportMenu, ChartHover, ChartItem, ChartSvg, ChartTitle, ChartTooltip, ChartTreemap, ChartTreemapGroup } from '@primeui/vue-chart';

<ChartSvg>
    <ChartTreemap :data="data" category-field="categoryField" value-field="valueField" />
</ChartSvg>

Treemaps show hierarchical data as nested rectangles sized by value, good for part-to-whole comparisons with many categories. Cell area scales proportionally to each value. Pass a flat array with parentField and a unique node identifier to define drilldown-enabled hierarchy.

#Basic

Set categoryField and valueField to map data fields. Cell area scales proportionally to each value.

#Colors

Pass an array to color to assign a palette to cells; colors cycle by index across items or groups. Pass a static value to color to apply a single color to all cells.

#Color Range

Set colorValueField to a numeric field to map cell colors to a gradient. Set colorRange to define the color stops; breakpoints are auto-computed from the data min/max. Set colorScale alongside colorRange to define explicit breakpoints, useful for diverging scales where negative, neutral, and positive values need stable stops.

#Hierarchy

Set nodeId to the field name holding each item's own unique ID, and parentField to the field name holding its parent's ID, the same pattern as a SQL adjacency list. The treemap builds the full hierarchy by matching IDs to parent references. Parent nodes with a null or missing parent value become top-level containers.

#Drilldown

Set drilldown to enable click-to-drill navigation. Clicking a parent cell zooms into its children. Add ChartBreadcrumb to display a navigation trail; click any crumb to drill back up. Set rootLabel to name the top-level breadcrumb entry.

Set drilldownMode="flat" to render parent cells as regular solid cells where clicking drills in. The default "nested" mode shows parent headers with children visible inside.

#Layout

Set layout to control the tiling algorithm. squarify (default) minimizes aspect ratio; cells are as square as possible. slice creates horizontal strips, dice creates vertical strips, and sliceDice alternates between them by depth level.

#Labels

Set labelMinSize to hide labels on cells too small to fit text. Use showGroupLabel and groupLabelHeight to control parent header label visibility and height.

#Custom Content

Set renderContent to replace default cell labels with fully custom content. The callback receives the cell's position, dimensions, value, color, and label fields. In SVG mode return a VNode. In Canvas mode the context is pre-clipped to the cell bounds; draw directly and return null.

#Declarative

Define cells inline using ChartTreemapGroup and ChartItem children instead of a data array. ChartTreemapGroup creates a parent container; set label and color. Nest ChartItem children inside each group to define the leaf cells. This pattern maps directly to the group + drilldown hierarchy; each ChartTreemapGroup becomes a drillable parent when drilldown is set on ChartTreemap.

#Title & Caption

Add ChartTitle to display a title above the chart and ChartCaption for a descriptive line beneath it. Adding both reduces the available chart area.

For full configuration see Title & Caption.

#Hover

ChartHover brightens the hovered cell while the rest stay at normal opacity. Set brightness to control the lightening factor, or set dimOpacity below 1 when you intentionally want non-hovered cells to fade.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show cell details on hover. The tooltip displays the label and value for the hovered cell.

For full configuration see Tooltip.

#Legend

Add ChartColorLegend to map cell colors to a value scale. Set colorValueField to color cells by a metric separate from their size, and pass matching colorScale and colorRange stops. The legend renders a gradient bar; set position to top, bottom, left, or right.

For full configuration see Legend.

#Data Labels

Add ChartDataLabels to display a value line below the leaf cell name. By default the value line shows the plain value. Set display to value, percentage, or both to switch the content, where the percentage is each leaf's share of the visible leaf total. Set formatter to build custom text; the callback receives the value, percentage, name, and row datum, so a sibling field such as a change value can drive the line. Set color to style the value line, while labelColor on ChartTreemap still colors the cell name.

For full configuration see Data Labels.

#Animation

Pass the chart-root animation prop (<ChartSvg> / <ChartCanvas>) to control entrance and update transitions. Cells grow from their center position on entrance. Drilldown transitions use a zoom animation.

For full configuration see Animation.

#Export

Add ChartExportMenu to let users download the chart as PNG, SVG, or PDF.

See Export for format options and programmatic export.

#Responsive

See Responsive for container sizing, aspect ratio, and breakpoint configuration.

#Accessibility

See Accessibility for ARIA labels, keyboard navigation, and screen reader support.

#API

#ChartTreemap

Visual styling props with type accessor → R accept a static value, a per-cell array, a field name (keyof T), or a callback (ctx: ItemContext<T>) => R | undefined. Color-family arrays cycle modulo length; other accessor arrays clip and fall back to the series default.

#TreemapLevelConfig

Each entry in levels styles all cells at a given depth.

#ItemContext

Passed to every accessor → R callback. Return undefined to fall back to the series-level default for that cell.

#Color Resolution Priority

#TreemapCellContext

Passed to the renderContent callback for each cell.

#ChartBreadcrumb

Add ChartBreadcrumb alongside ChartTreemap when drilldown is enabled to display a navigation trail. Click any crumb to navigate back up the hierarchy. The breadcrumb automatically syncs with the drilldown state and uses rootLabel from ChartTreemap.

#ChartTreemapGroup

Use ChartTreemapGroup as children of ChartTreemap for declarative hierarchy definitions. Each group becomes a parent container. Nest ChartItem children inside for leaf cells.

#ChartItem

Use ChartItem as children of ChartTreemapGroup or directly inside ChartTreemap for inline leaf cell definitions.

#Related Docs

• Treemap Examples
• Legend
• Data Labels
• Tooltip
• Hover
• Annotation
• Animation