Timeline
The timeline series places labelled events along an axis — release histories, project milestones, company chronologies. Alternating labels keep dense events readable.
import "highcharts/modules/timeline";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: "timeline"
},
title: {
text: "mates release history"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime",
visible: false
},
yAxis: {
visible: false,
title: {
text: ""
}
},
series: [
{
type: "timeline",
data: [
{
x: 1756684800000,
name: "v0.1",
description: "First atoms and templates"
},
{
x: 1764547200000,
name: "v0.3",
description: "Router and stores"
},
{
x: 1772323200000,
name: "v0.5",
description: "SSR + hydration"
},
{
x: 1782864000000,
name: "v1.0",
description: "Stable API"
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
Points carry a name (the headline) and a description (the body). The datetime axis positions each event.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "timeline"
},
title: {
text: "mates release history"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime",
visible: false
},
yAxis: {
visible: false,
title: {
text: ""
}
},
series: [
{
type: "timeline",
data: [
{
x: 1756684800000,
name: "v0.1",
description: "First atoms and templates"
},
{
x: 1764547200000,
name: "v0.3",
description: "Router and stores"
},
{
x: 1772323200000,
name: "v0.5",
description: "SSR + hydration"
},
{
x: 1782864000000,
name: "v1.0",
description: "Stable API"
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;plotOptions.timeline.dataLabels alternates above/below the axis line when points crowd together.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "timeline"
},
title: {
text: "Roadmap"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
visible: false,
type: "datetime"
},
yAxis: {
visible: false,
title: {
text: ""
}
},
plotOptions: {
timeline: {
marker: {
symbol: "circle",
radius: 5
},
dataLabels: {
format: "<b>{point.name}</b><br/>{point.description}",
alternateModulo: 2
}
}
},
series: [
{
type: "timeline",
color: "#00968c",
data: [
{
x: 1767225600000,
name: "Sprint 1",
description: "Design"
},
{
x: 1771113600000,
name: "Sprint 2",
description: "Build"
},
{
x: 1775001600000,
name: "Sprint 3",
description: "Test"
},
{
x: 1778889600000,
name: "Sprint 4",
description: "Ship"
},
{
x: 1782777600000,
name: "Sprint 5",
description: "Design"
},
{
x: 1786665600000,
name: "Sprint 6",
description: "Build"
},
{
x: 1790553600000,
name: "Sprint 7",
description: "Test"
},
{
x: 1794441600000,
name: "Sprint 8",
description: "Ship"
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Combine timeline events with a line series for context — milestones on top of the burndown they belong to.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "timeline"
},
title: {
text: "Project milestones"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime",
labels: {
format: "{value:%b}"
}
},
yAxis: {
visible: false,
title: {
text: ""
}
},
series: [
{
type: "timeline",
data: [
{
x: 1768435200000,
name: "Kickoff",
description: "Scope agreed"
},
{
x: 1775001600000,
name: "Beta",
description: "Private beta opens"
},
{
x: 1788220800000,
name: "GA",
description: "General availability"
}
]
}
]
});
// 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 timeline charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"timeline" | — | Registered by highcharts/modules/timeline. |
series[].data[].x |
number (timestamp) | — | Event position on the axis. |
series[].data[].name |
string | — | The event headline. |
series[].data[].description |
string | — | Body text under the headline. |
plotOptions.timeline.dataLabels.alternateModulo |
number | 2 | Alternate label side every Nth point. |
plotOptions.timeline.marker.* |
MarkerOptions | — | Event dot styling. |