Docs › Chart types
Treemap
Size as area: market caps by sector, revenue by channel, colored by change.
type: 'treemap' splits the area by value (a squarified layout, tiles as close to square as the data allows). Tiles with room show the name and the value inside; narrow ones get an ellipsis or no label. Tiles keep a 2px gap.
One level of groups, colored by change
Each series is a group (a sector) and its points are { x: name, y: size, change: percent }. colorBy: 'change' colors tiles by change: gray at zero, one hue for up and another for down, darker as the change grows. deltaColors: 'korea' is red up / blue down as in Korean stock apps; the default 'semantic' is good green / bad red (deltaUpIsGood: false swaps them).
Live example
Code for this example
createChart('#chart', {
type: 'treemap',
title: 'Market cap by sector',
subtitle: 'Daily change · sample data',
colorBy: 'change',
deltaColors: 'korea',
numberFormat: 'compact',
prefix: '$',
data: {
series: [
{ name: 'Chips', data: [{ x: 'Samsung', y: 320e9, change: 1.8 }, { x: 'SK hynix', y: 105e9, change: 3.2 }, { x: 'Hanmi', y: 9e9, change: -2.1 }] },
{ name: 'Autos', data: [{ x: 'Hyundai', y: 39e9, change: -0.6 }, { x: 'Kia', y: 31e9, change: -1.4 }, { x: 'Mobis', y: 17e9, change: 0.4 }] },
{ name: 'Bio', data: [{ x: 'Samsung Bio', y: 44e9, change: 0.9 }, { x: 'Celltrion', y: 29e9, change: -2.7 }] },
{ name: 'Banks', data: [{ x: 'KB', y: 24e9, change: 0.2 }, { x: 'Shinhan', y: 19e9, change: 0 }, { x: 'Hana', y: 13e9, change: -0.3 }] },
],
},
});The largest |change| gets the strongest color; treemap: { range: 3 } saturates at ±3% like a market map. The color key below shows the range. Group names sit at the top of each group; the tooltip shows the group, name, value, share of the whole and change.
Without groups
Labels and one array of numbers are enough. Tiles take the default palette in order (gray past eight).
Live example
Code for this example
createChart('#chart', {
type: 'treemap',
title: 'Revenue by channel',
prefix: '$',
data: {
labels: ['Search', 'Social', 'Direct', 'Partners', 'Email', 'Other'],
series: [{ name: 'Revenue', data: [52000, 31000, 22000, 12000, 6000, 2000] }],
},
});| Option | Default | What it does |
|---|---|---|
colorBy | 'series' | 'series': a color per group (per tile without groups). 'change': two hues around a gray zero |
deltaColors | 'semantic' | 'korea': red up, blue down |
deltaUpIsGood | true | With semantic colors, is a rise good? |
treemap.range | largest |change| | The change (%) that gets the strongest color |
heatmap.legend | true | The color key of colorBy: 'change' |