Spline
Splines draw smooth Bézier curves through the data instead of straight segments — organic measurements like temperature, heart rate and audio levels read naturally as curves.
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: "spline"
},
title: {
text: "Temperature"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
yAxis: {
title: {
text: "°C"
},
labels: {
format: "{value}°"
}
},
plotOptions: {
spline: {
lineWidth: 2.5,
marker: {
enabled: true,
radius: 3
}
}
},
series: [
{
type: "spline",
name: "Lisbon",
data: [
11,
12,
14,
16,
19,
22,
25,
25,
23,
19,
15,
12
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
chart.type = "spline" is the only change from a line chart — every option (markers, dash styles, zones) works identically.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "spline"
},
title: {
text: "Temperature"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
yAxis: {
title: {
text: "°C"
},
labels: {
format: "{value}°"
}
},
plotOptions: {
spline: {
lineWidth: 2.5,
marker: {
enabled: true,
radius: 3
}
}
},
series: [
{
type: "spline",
name: "Lisbon",
data: [
11,
12,
14,
16,
19,
22,
25,
25,
23,
19,
15,
12
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;plotOptions.spline.linecap and the point spacing shape the curve. Lower data density produces rounder interpolation.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "spline"
},
title: {
text: "Heart rate during workout"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Warmup",
"Set 1",
"Set 2",
"Set 3",
"Cardio",
"Cooldown"
]
},
yAxis: {
title: {
text: "bpm"
},
min: 60
},
plotOptions: {
spline: {
lineWidth: 3,
marker: {
enabled: true,
symbol: "circle",
radius: 4
}
}
},
series: [
{
type: "spline",
name: "Heart rate",
data: [
72,
118,
126,
131,
142,
96
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;marker.symbol can vary per point — pass point objects with marker overrides to highlight specific events on the curve.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "spline"
},
title: {
text: "Snow depth by month"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
yAxis: {
title: {
text: "cm"
}
},
plotOptions: {
spline: {
lineWidth: 2
}
},
series: [
{
type: "spline",
name: "Alpine base",
data: [
170,
165,
120,
60,
10,
{
y: 0,
marker: {
symbol: "url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ctext x='1' y='7' font-size='7'%3E%E2%98%80%3C/text%3E%3C/svg%3E)"
}
},
{
y: 0,
marker: {
symbol: "url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ctext x='1' y='7' font-size='7'%3E%E2%98%80%3C/text%3E%3C/svg%3E)"
}
},
{
y: 0,
marker: {
symbol: "url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ctext x='1' y='7' font-size='7'%3E%E2%98%80%3C/text%3E%3C/svg%3E)"
}
},
{
y: 0,
marker: {
symbol: "url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ctext x='1' y='7' font-size='7'%3E%E2%98%80%3C/text%3E%3C/svg%3E)"
}
},
5,
45,
120
]
}
]
});
// 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 spline charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"spline" | — | Smooth Bézier interpolation instead of straight segments. |
plotOptions.spline.lineWidth |
number | 2 | Curve width in pixels. |
plotOptions.spline.marker.* |
MarkerOptions | — | Identical marker API to line series, including per-point overrides. |
series[].data[].marker |
{ symbol, radius, fillColor… } | — | Per-point marker overrides — highlight specific events. |
plotOptions.spline.shadow |
boolean | ShadowOptions | false | Drop shadow under the curve. |