Treemap
Monthly cloud spend of five teams, split into the services each team runs: every tile's area is the service's cost.
Pick a preset to reconfigure every chart
Not available
No treemap mark (an open feature request). The tiles would be laid out with d3-hierarchy's treemap, which isn't part of Plot, and drawn as rect and text marks.
Not available
No treemap transform: Vega has one, Vega-Lite doesn't, so the tile positions would be computed with d3-hierarchy and drawn as ranged rect marks.
What to look for
- Labels. Unovis wraps each label inside its tile, sizes the text by the tile's value
(
enableTileLabelFontSizeVariation, on by default) and skips tiles under 20px (minTileSizeForLabel). TanStack Charts draws a label only where it fits. ECharts shortens labels with an ellipsis, Chart.js cuts them at the tile's edge, and Nivo turns them sideways in tall tiles (orientLabel) and lets them run past small ones. Recharts' default content shows names only and writes each team's name halfway down its group, at its left edge, under the service names. - Team colors. Unovis draws every service in a lighter shade of its team's palette color. TanStack Charts and ECharts give a team's services one color, Recharts fills the teams and draws the services transparent on top of them, and Nivo draws every node at a third of its opacity, so the services get darker where they overlap their team. The Chart.js treemap plugin has no default colors, so the demo takes the Chart.js palette.
- Hide a team. Unovis' legend (a
BulletLegendwith a few lines of state, plustileColorso the teams keep their colors) and TanStack Charts' interactive legend remove the team, and the others fill the space. Recharts' and Nivo's treemaps have no legend, and the ECharts and Chart.js legends list series and datasets, not the groups of a treemap. - Click a tile. ECharts zooms into it by default (
nodeClick: 'zoomToNode') and shows a breadcrumb to go back up; Recharts can drill down withtype="nest". Unovis has no drill-down. - Randomize the data. Unovis, TanStack Charts, ECharts and Nivo move and resize the tiles. Recharts keys its nodes by position and Chart.js grows every tile in again, so both replay their entry animation.
- Presets. Group labels (
labelInternalNodes,tilePaddingTop) are Chart.js'captions, ECharts'upperLabeland Nivo's parent labels; TanStack Charts renders only the leaves and Recharts has no header option. Rounded tiles (tilePadding,tileBorderRadius) are a pair of options in TanStack Charts, Chart.js and ECharts; Recharts and Nivo have the gaps but no corner radius. Shaded tiles (enableLightnessVariance) shades each team's services by cost; only ECharts can do the same, with a level'scolorSaturationrange.
Feature comparison
| Feature | Unovis1.8.0 | Recharts3.10.1 | Chart.js4.5.1 | ECharts6.1.0 | Nivo0.99.0 | AG Charts14.2.0 | Observable Plot0.6.17 | Vega-Lite6.5.0 | TanStack Charts1.1.0 |
|---|---|---|---|---|---|---|---|---|---|
| Treemap | |||||||||
| Data labels | |||||||||
| Tooltip | |||||||||
| Animated data updates | |||||||||
| Theming | |||||||||
| Dark mode |
Every cell links to its source. See how we compare for the rules we followed.