Silvi
Create(opens in a new tab)

Treemap

PreviousNext

Shares of a whole as nested rectangles, one per row, optionally grouped.

<k.Treemap> draws one rectangle per row, its area the row’s value. Use it for how a total splits across many categories, where a bar chart would be too long. With group, several groups share one map, each in its own tone.

Example

Sales by product

HomeFurniture
Lamps340 · 21.7 %Rugs210 · 13.4 %Chairs480 · 30.6 %Tables390 · 24.8 %

Props

Also key, description, span (default 1) and info: see Props every component takes.

Name Type Required Default Meaning
series query name yes The query the rows come from
name column yes Each rectangle’s name
value column yes Each rectangle’s size
title text yes The heading
format format no number How the value prints
suffix text no Printed after each value, such as “ kr”
group column no One map of several groups, in order of first appearance, each in its own tone
groupNote column no A muted line after each group’s name in the legend (from its first row)
share true/false no false Prints each rectangle’s share of the whole after its value: “340 · 21.1 %”

Checks

A series that is not one of the report’s queries, or a column it names that the query’s rows do not have, fails the typecheck, as does a missing required prop or a value of the wrong type.