Range Charts
Range series take a [low, high] pair per point instead of a single value: columnrange draws floating vertical bars, arearange shades the band between two lines, errorbar overlays uncertainty. All three ship in highcharts-more, loaded by mates-charts automatically.
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.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "columnrange"
},
title: {
text: "Monthly temperature range"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun"
]
},
yAxis: {
title: {
text: "°C"
}
},
plotOptions: {
columnrange: {
borderRadius: 4,
dataLabels: {
enabled: true,
format: "{y}°"
}
}
},
series: [
{
type: "columnrange",
name: "Temperatures",
data: [
[
-3,
6
],
[
-1,
8
],
[
3,
14
],
[
7,
19
],
[
12,
24
],
[
16,
28
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
Each point is [low, high]; the floating column spans the interval. Perfect for temperature swings, SLO windows, price ranges.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "columnrange"
},
title: {
text: "Monthly temperature range"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun"
]
},
yAxis: {
title: {
text: "°C"
}
},
plotOptions: {
columnrange: {
borderRadius: 4,
dataLabels: {
enabled: true,
format: "{y}°"
}
}
},
series: [
{
type: "columnrange",
name: "Temperatures",
data: [
[
-3,
6
],
[
-1,
8
],
[
3,
14
],
[
7,
19
],
[
12,
24
],
[
16,
28
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;arearange shades the region between two series — here the target latency band vs the measured p99 line.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "arearange"
},
title: {
text: "p99 latency vs SLO band"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: true
},
xAxis: {
categories: [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
]
},
yAxis: {
title: {
text: "ms"
}
},
plotOptions: {
arearange: {
fillOpacity: 0.25,
lineWidth: 0,
marker: {
enabled: false
}
}
},
series: [
{
type: "arearange",
name: "SLO band",
data: [
[
120,
180
],
[
120,
180
],
[
120,
180
],
[
120,
180
],
[
120,
180
],
[
120,
180
],
[
120,
180
]
]
},
{
type: "line",
name: "p99",
data: [
142,
168,
155,
171,
149,
133,
128
],
lineWidth: 2,
marker: {
enabled: false
}
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;The errorbar series overlays uncertainty ranges on any chart — here on column measurements.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
animation: false
},
title: {
text: "Sensor readings ± confidence"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: true
},
xAxis: {
categories: [
"A",
"B",
"C",
"D"
]
},
yAxis: {
title: {
text: "°C"
}
},
series: [
{
type: "column",
name: "Mean",
data: [
18.2,
21.4,
19.8,
23.1
],
borderRadius: 3
},
{
type: "errorbar",
name: "95% CI",
data: [
[
16.8,
19.6
],
[
20.1,
22.7
],
[
18.4,
21.2
],
[
21.9,
24.3
]
],
lineWidth: 1.5,
stemWidth: 1.5,
whiskerWidth: 1.5
}
]
});
// 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 range charts charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"columnrange" | "arearange" | "errorbar" | — | Floating columns, a shaded low/high band, or uncertainty whiskers. |
series[].data |
[low, high][] | — | Two values per point, in that order. |
plotOptions.columnrange.borderRadius |
number | 0 | Rounds the floating bar ends. |
plotOptions.arearange.fillOpacity |
number | 0.75 | Band transparency (0–1). |
plotOptions.arearange.lineWidth |
number | 1 | Edge line width — 0 for a pure band. |
plotOptions.errorbar.stemWidth / whiskerWidth |
number | — | Whisker styling. |
plotOptions.series.dataLabels.enabled |
boolean | false | Label each end of the range. |