Treemap
Treemaps tile a rectangle by value — one level for a flat comparison, nested levels for hierarchies. The same { id, parent, value } format powers sunburst.
Module setup. Auto-loaded by the main mates-charts entry — or import it yourself from mates-charts/core.
import "mates-charts/modules/treemap";Usage
Create a chart atom with standard Highcharts options,
then render Chart(chart) anywhere in a
mates template. Every later chart.set(…) or
chart.update(…) re-renders the chart — no
imperative Highcharts code.
Quick start
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "treemap"
},
title: {
text: "Cloud spend"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
colorAxis: {
minColor: "#d7f0ee",
maxColor: "#00695c",
visible: false
},
plotOptions: {
treemap: {
layoutAlgorithm: "squarified",
borderWidth: 2,
borderColor: "#ffffff",
dataLabels: {
enabled: true,
format: "{point.name}"
}
}
},
series: [
{
type: "treemap",
name: "Spend",
data: [
{
name: "Compute",
value: 42
},
{
name: "Storage",
value: 26
},
{
name: "Network",
value: 14
},
{
name: "Observability",
value: 9
},
{
name: "Compute (spot)",
value: 6
},
{
name: "Other",
value: 3
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
Flat treemap
One level of tiles sized by value; layoutAlgorithm picks the tiling strategy.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "treemap"
},
title: {
text: "Cloud spend"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
colorAxis: {
minColor: "#d7f0ee",
maxColor: "#00695c",
visible: false
},
plotOptions: {
treemap: {
layoutAlgorithm: "squarified",
borderWidth: 2,
borderColor: "#ffffff",
dataLabels: {
enabled: true,
format: "{point.name}"
}
}
},
series: [
{
type: "treemap",
name: "Spend",
data: [
{
name: "Compute",
value: 42
},
{
name: "Storage",
value: 26
},
{
name: "Network",
value: 14
},
{
name: "Observability",
value: 9
},
{
name: "Compute (spot)",
value: 6
},
{
name: "Other",
value: 3
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Hierarchy with parents
Points link by id → parent; parents show as header tiles. Allow drill-to-leaf with allowDrillToNode.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "treemap"
},
title: {
text: "Organisation headcount"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
plotOptions: {
treemap: {
layoutAlgorithm: "stripes",
alternateStartingDirection: true,
borderWidth: 2,
borderColor: "#ffffff",
levelIsConstant: false,
allowDrillToNode: true,
dataLabels: {
enabled: true,
format: "{point.name}"
}
}
},
series: [
{
type: "treemap",
name: "Headcount",
data: [
{
id: "eng",
name: "Engineering",
color: "#00968c"
},
{
id: "fe",
name: "Frontend",
parent: "eng",
value: 18
},
{
id: "be",
name: "Backend",
parent: "eng",
value: 20
},
{
id: "plat",
name: "Platform",
parent: "eng",
value: 8
},
{
id: "gtm",
name: "Go-to-market",
color: "#0172ad"
},
{
id: "sales",
name: "Sales",
parent: "gtm",
value: 14
},
{
id: "mkt",
name: "Marketing",
parent: "gtm",
value: 8
},
{
id: "ops",
name: "Operations",
color: "#d97706"
},
{
id: "sup",
name: "Support",
parent: "ops",
value: 10
},
{
id: "fin",
name: "Finance",
parent: "ops",
value: 5
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Per-level styling
levels[] styles each depth differently — borders, colours and data-label behaviour per level.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "treemap"
},
title: {
text: "Repository size by service"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
plotOptions: {
treemap: {
layoutAlgorithm: "squarified",
borderWidth: 3,
borderColor: "#ffffff",
levelIsConstant: false,
dataLabels: {
enabled: true
},
levels: [
{
level: 1,
borderWidth: 4,
dataLabels: {
enabled: true,
format: "{point.name}",
style: {
fontWeight: "700"
}
}
},
{
level: 2,
borderWidth: 1,
dataLabels: {
enabled: false
}
}
]
}
},
series: [
{
type: "treemap",
name: "LOC",
data: [
{
id: "web",
name: "mates-web"
},
{
name: "app",
parent: "web",
value: 48000
},
{
name: "docs",
parent: "web",
value: 9000
},
{
id: "core",
name: "mates-core"
},
{
name: "runtime",
parent: "core",
value: 61000
},
{
name: "router",
parent: "core",
value: 15000
},
{
id: "ui",
name: "mates-ui"
},
{
name: "components",
parent: "ui",
value: 39000
},
{
name: "tokens",
parent: "ui",
value: 7000
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Options reference
mates-charts passes options straight through to Highcharts — these are the keys that matter for treemap charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"treemap" | — | Registered by mates-charts/modules/treemap. |
series[].data |
{ name, value }[] or { id, parent, value }[] | — | Flat tiles or a linked hierarchy. |
plotOptions.treemap.layoutAlgorithm |
"squarified" | "sliceAndDice" | "stripes" | "strip" | "sliceAndDice" | Tiling strategy — squarified keeps tiles close to square. |
plotOptions.treemap.levelIsConstant |
boolean | true | false = deeper levels get proportionally thinner tiles. |
plotOptions.treemap.levels[] |
{ level, borderWidth, dataLabels… }[] | — | Per-depth styling. |
plotOptions.treemap.allowDrillToNode |
boolean | false | Click a parent to zoom into its subtree. |
plotOptions.treemap.alternateStartingDirection |
boolean | false | Alternate tile direction per level (stripes layouts). |