Heatmap
Heatmaps colour a matrix of [x, y, value] cells — activity by day/hour, feature usage grids, correlation matrices. The colour ramp comes from the colorAxis.
Module setup. Registers both heatmap and tilemap series types. Auto-loaded by the main mates-charts entry — or import it yourself from mates-charts/core.
import "mates-charts/modules/heatmap";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: "heatmap"
},
title: {
text: "Commits by day"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri"
]
},
yAxis: {
categories: [
"Morning",
"Afternoon",
"Evening"
],
title: {
text: ""
}
},
colorAxis: {
min: 0,
minColor: "#e6f7f5",
maxColor: "#00695c",
visible: false
},
series: [
{
type: "heatmap",
name: "Commits",
borderWidth: 1,
borderColor: "#ffffff",
data: [
[
0,
0,
3
],
[
1,
0,
7
],
[
2,
0,
9
],
[
3,
0,
5
],
[
4,
0,
2
],
[
0,
1,
6
],
[
1,
1,
11
],
[
2,
1,
14
],
[
3,
1,
8
],
[
4,
1,
4
],
[
0,
2,
1
],
[
1,
2,
4
],
[
2,
2,
7
],
[
3,
2,
3
],
[
4,
2,
1
]
],
dataLabels: {
enabled: true,
format: "{point.value}"
}
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
Weekly activity grid
Highcharts demo ↗
Cells are [x, y, value]; axis categories give the grid its labels. Nulls render as empty cells.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "heatmap"
},
title: {
text: "Commits by day"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri"
]
},
yAxis: {
categories: [
"Morning",
"Afternoon",
"Evening"
],
title: {
text: ""
}
},
colorAxis: {
min: 0,
minColor: "#e6f7f5",
maxColor: "#00695c",
visible: false
},
series: [
{
type: "heatmap",
name: "Commits",
borderWidth: 1,
borderColor: "#ffffff",
data: [
[
0,
0,
3
],
[
1,
0,
7
],
[
2,
0,
9
],
[
3,
0,
5
],
[
4,
0,
2
],
[
0,
1,
6
],
[
1,
1,
11
],
[
2,
1,
14
],
[
3,
1,
8
],
[
4,
1,
4
],
[
0,
2,
1
],
[
1,
2,
4
],
[
2,
2,
7
],
[
3,
2,
3
],
[
4,
2,
1
]
],
dataLabels: {
enabled: true,
format: "{point.value}"
}
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Gradient colorAxis with legend
colorAxis.stops defines the ramp; a visible colorAxis legend shows the scale next to the grid.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "heatmap"
},
title: {
text: "Feature usage by cohort"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: true,
align: "right",
layout: "vertical",
verticalAlign: "middle"
},
xAxis: {
categories: [
"Free",
"Pro",
"Team",
"Enterprise"
]
},
yAxis: {
categories: [
"Dashboards",
"Exports",
"API",
"SSO",
"Audit"
],
title: {
text: ""
}
},
colorAxis: {
min: 0,
max: 100,
stops: [
[
0,
"#e6f7f5"
],
[
0.5,
"#4db6ac"
],
[
1,
"#00695c"
]
],
labels: {
format: "{value}%"
}
},
series: [
{
type: "heatmap",
name: "Adoption",
borderWidth: 1,
borderColor: "#ffffff",
data: [
[
0,
0,
62
],
[
1,
0,
74
],
[
2,
0,
81
],
[
3,
0,
88
],
[
0,
1,
25
],
[
1,
1,
48
],
[
2,
1,
66
],
[
3,
1,
79
],
[
0,
2,
8
],
[
1,
2,
34
],
[
2,
2,
59
],
[
3,
2,
82
],
[
0,
3,
0
],
[
1,
3,
12
],
[
2,
3,
44
],
[
3,
3,
91
],
[
0,
4,
0
],
[
1,
4,
4
],
[
2,
4,
22
],
[
3,
4,
76
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Tilemap (hexagonal)
Highcharts demo ↗
The tilemap series (registered with heatmap) renders the same data as tiles — tileType switches square, diamond or hexagon.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "tilemap"
},
title: {
text: "Uptime by region"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"w1",
"w2",
"w3",
"w4"
],
labels: {
enabled: false
}
},
yAxis: {
categories: [
"EU",
"US",
"APAC"
],
labels: {
enabled: false
}
},
colorAxis: {
min: 95,
max: 100,
stops: [
[
0,
"#dc2626"
],
[
0.5,
"#d97706"
],
[
1,
"#16a34a"
]
],
visible: false
},
plotOptions: {
tilemap: {
tileShape: "hexagon",
borderWidth: 1,
borderColor: "#ffffff",
dataLabels: {
enabled: true,
format: "{point.value}%"
}
}
},
series: [
{
type: "tilemap",
name: "Uptime",
data: [
[
0,
0,
99.9
],
[
1,
0,
99.8
],
[
2,
0,
100
],
[
3,
0,
99.7
],
[
0,
1,
99.5
],
[
1,
1,
99.9
],
[
2,
1,
99.6
],
[
3,
1,
99.8
],
[
0,
2,
97.2
],
[
1,
2,
99.4
],
[
2,
2,
98.9
],
[
3,
2,
99.6
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Correlation matrix
Diverging colour ramps (-1…1) with signed values — the standard correlation-matrix look.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "heatmap"
},
title: {
text: "Metric correlations"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: true,
align: "right",
layout: "vertical",
verticalAlign: "middle"
},
xAxis: {
categories: [
"Sessions",
"Signups",
"Revenue",
"Churn"
]
},
yAxis: {
categories: [
"Sessions",
"Signups",
"Revenue",
"Churn"
],
title: {
text: ""
}
},
colorAxis: {
min: -1,
max: 1,
stops: [
[
0,
"#dc2626"
],
[
0.5,
"#f8fafc"
],
[
1,
"#00695c"
]
],
labels: {
format: "{value}"
}
},
series: [
{
type: "heatmap",
name: "r",
borderWidth: 1,
borderColor: "#ffffff",
data: [
[
0,
0,
1
],
[
1,
0,
0.72
],
[
2,
0,
0.64
],
[
3,
0,
-0.31
],
[
0,
1,
0.72
],
[
1,
1,
1
],
[
2,
1,
0.81
],
[
3,
1,
-0.42
],
[
0,
2,
0.64
],
[
1,
2,
0.81
],
[
2,
2,
1
],
[
3,
2,
-0.55
],
[
0,
3,
-0.31
],
[
1,
3,
-0.42
],
[
2,
3,
-0.55
],
[
3,
3,
1
]
],
dataLabels: {
enabled: true,
format: "{point.value:.2f}"
}
}
]
});
// 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 heatmap charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"heatmap" | "tilemap" | — | Both registered by mates-charts/modules/heatmap. |
series[].data |
[x, y, value][] | — | Cell coordinates plus intensity. |
colorAxis.stops |
[stop, color][] | — | Gradient ramp — use a diverging pair for signed data. |
colorAxis.min / max |
number | auto | Pin the scale so multiple charts compare fairly. |
plotOptions.heatmap.borderWidth / borderColor |
number / string | 1 / #ffffff | Cell gaps and borders. |
plotOptions.tilemap.tileShape |
"square" | "diamond" | "hexagon" | "circle" | "square" | Tile geometry. |
series[].dataLabels.format |
string | — | Print the cell value, e.g. "{point.value:.2f}". |