Treemap chart
A whole split into nested rectangles, each sized by its value: market maps, budgets and disk usage.
A treemap splits a whole into rectangles whose areas follow their values, grouped the way the data is: stocks by
sector, spending by department, files by folder. Unlike a pie, it holds hundreds of parts and a hierarchy, and the
largest parts stand out at a glance. One row is one tile, named by label-field and sized by the single series. It is
drawn by ECharts’ treemap series.
Import
import '@c2n/components/chart/treemap-chart'This chart draws with ECharts 6, a peer dependency it loads on first draw: npm install echarts.
Usage
Data
Rows are plain objects. A row is a tile: label-field names it, and the one c2-chart-series sizes it. Rows without a
positive value are left out, and so is a group left empty. There are two ways to give the hierarchy:
- Flat rows with
group-field. The field names the group a row belongs to, as a market map groups stocks by sector. A comma-separated list nests the groups, outermost first:group-field="region, sector". - Nested rows with
children-field(childrenby default). A row with children is a group of them and is sized by them, as a folder is by its files; children may nest to any depth.
Siblings are laid out largest first. The nodes getter returns every group and tile in that order, each with its path,
value, share of the whole and share of its group; buildTreemap(rows, options) is the same computation as a plain
function.
Colour
Without color-field, each top-level group takes the next colour of --c2-chart__series-1…8--color and its tiles
share it; a group keeps its colour when another is hidden. Each group’s name sits in a header strip above its tiles.
With color-field, tiles are coloured by that field on a scale around zero instead: from --c2-chart__neutral--color
at zero towards --c2-chart__positive--color above it and --c2-chart__negative--color below, reaching full strength
at color-max (by default the largest value either side). color-label names the measure in the tooltip and the
table, and color-suffix follows its value, or formatColor formats it from code. Text on a tile is white or
near-black, whichever reads better on it.
--c2-chart__tile--gap, --c2-chart__tile--border-radius and --c2-chart__group--gap set the spacing.
Interaction
The tooltip gives a tile’s path, its value, its color-field value, and its share of the whole and of its group;
hovering a group header describes the whole group. point-click reports the tile or group, and clicking one
highlights its top-level group, dimming the rest, as a legend entry does.
The headers already name every group, so the legend is off by default. With legend="bottom" it lists the top-level
groups; with legend-action="toggle" an entry hides its group (setGroupVisible(name, false) does the same from code)
and the rest grow into the space. A visually hidden table lists every tile with its group, value and share for screen
readers, and names the plot.