Stock & Financial
The Stock toolkit adds financial series (candlestick, ohlc, flags), the navigator + range selector + scrollbar, and a library of technical indicators — all on the regular core build via the stock module.
Module setup. Registers candlestick/ohlc/flags, the navigator, range selector and scrollbar. Technical indicators additionally need their own import (highcharts/indicators/*).
import "highcharts/modules/stock";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: "candlestick"
},
title: {
text: "AAPL — Q3 2026"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime",
labels: {
format: "{value:%b %d}"
}
},
yAxis: {
title: {
text: "USD"
}
},
plotOptions: {
candlestick: {
upColor: "#16a34a",
color: "#dc2626",
borderWidth: 1
}
},
series: [
{
type: "candlestick",
name: "AAPL",
data: [
[
1780272000000,
182.4,
183.84,
176.93,
178.9
],
[
1780358400000,
178.9,
179.91,
176.83,
177.35
],
[
1780444800000,
177.35,
182.26,
175.94,
180.87
],
[
1780531200000,
180.87,
181.16,
177.07,
179.26
],
[
1780617600000,
179.26,
183.52,
178.6,
182.28
],
[
1780704000000,
182.28,
182.79,
179.7,
180.58
],
[
1780790400000,
180.58,
182.77,
176.43,
177.86
],
[
1780876800000,
177.86,
182.44,
177.65,
180.45
],
[
1780963200000,
180.45,
181.24,
178.12,
180.88
],
[
1781049600000,
180.88,
182.16,
179.55,
180.77
],
[
1781136000000,
180.77,
180.8,
178.93,
178.99
],
[
1781222400000,
178.99,
185.18,
176.88,
182.67
],
[
1781308800000,
182.67,
185.45,
180.96,
183.33
],
[
1781395200000,
183.33,
184.36,
181.6,
182.33
],
[
1781481600000,
182.33,
184.08,
180.4,
181.39
],
[
1781568000000,
181.39,
182.83,
177.87,
178.29
],
[
1781654400000,
178.29,
179.17,
177.58,
178.1
],
[
1781740800000,
178.1,
180.74,
173.71,
175.14
],
[
1781827200000,
175.14,
177.75,
171.28,
172.4
],
[
1781913600000,
172.4,
174.42,
170.99,
173.93
],
[
1782000000000,
173.93,
178.03,
172.14,
177.52
],
[
1782086400000,
177.52,
178.69,
174.97,
176.95
],
[
1782172800000,
176.95,
179.1,
172.7,
174.81
],
[
1782259200000,
174.81,
174.89,
171.79,
172.14
],
[
1782345600000,
172.14,
174.21,
171.5,
173.22
],
[
1782432000000,
173.22,
174.77,
172.95,
173.41
],
[
1782518400000,
173.41,
177.82,
171.41,
176.9
],
[
1782604800000,
176.9,
178.67,
172.97,
175.38
],
[
1782691200000,
175.38,
176.54,
172.86,
175.28
],
[
1782777600000,
175.28,
177.85,
174.35,
175.19
],
[
1782864000000,
175.19,
179.69,
173.24,
177.39
],
[
1782950400000,
177.39,
180.15,
175.98,
177.94
],
[
1783036800000,
177.94,
178.86,
175.88,
176.71
],
[
1783123200000,
176.71,
178.21,
174.74,
176.47
],
[
1783209600000,
176.47,
177.77,
172.34,
173.53
],
[
1783296000000,
173.53,
175.35,
169.27,
170.26
],
[
1783382400000,
170.26,
172.65,
169.71,
170.03
],
[
1783468800000,
170.03,
170.78,
168.63,
169.68
],
[
1783555200000,
169.68,
170.61,
166.29,
168.08
],
[
1783641600000,
168.08,
171.19,
166.88,
171.14
],
[
1783728000000,
171.14,
174.87,
170.82,
173.48
],
[
1783814400000,
173.48,
173.82,
170.82,
172.93
],
[
1783900800000,
172.93,
173.13,
170.78,
172.32
],
[
1783987200000,
172.32,
172.98,
170.34,
171.33
],
[
1784073600000,
171.33,
172.91,
169.67,
170.19
],
[
1784160000000,
170.19,
172.72,
168.36,
168.86
],
[
1784246400000,
168.86,
171.4,
166.87,
170.09
],
[
1784332800000,
170.09,
171,
167.13,
167.69
],
[
1784419200000,
167.69,
168.11,
164.08,
166.47
],
[
1784505600000,
166.47,
169.6,
165.18,
168.11
],
[
1784592000000,
168.11,
169.09,
167.37,
168.17
],
[
1784678400000,
168.17,
169.2,
166.48,
167.56
],
[
1784764800000,
167.56,
168.45,
166.23,
166.5
],
[
1784851200000,
166.5,
169.19,
166.47,
168.16
],
[
1784937600000,
168.16,
169.51,
166.81,
167.29
],
[
1785024000000,
167.29,
172.23,
164.87,
169.9
],
[
1785110400000,
169.9,
172.64,
168.6,
172.04
],
[
1785196800000,
172.04,
174.29,
168.02,
170.09
],
[
1785283200000,
170.09,
174.42,
168.49,
173.52
],
[
1785369600000,
173.52,
177.21,
173.2,
174.87
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
Candlestick chart
Highcharts demo ↗
Each point is [timestamp, open, high, low, close]. Up days and down days colour automatically (upColor / color).
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "candlestick"
},
title: {
text: "AAPL — Q3 2026"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime",
labels: {
format: "{value:%b %d}"
}
},
yAxis: {
title: {
text: "USD"
}
},
plotOptions: {
candlestick: {
upColor: "#16a34a",
color: "#dc2626",
borderWidth: 1
}
},
series: [
{
type: "candlestick",
name: "AAPL",
data: [
[
1780272000000,
182.4,
183.84,
176.93,
178.9
],
[
1780358400000,
178.9,
179.91,
176.83,
177.35
],
[
1780444800000,
177.35,
182.26,
175.94,
180.87
],
[
1780531200000,
180.87,
181.16,
177.07,
179.26
],
[
1780617600000,
179.26,
183.52,
178.6,
182.28
],
[
1780704000000,
182.28,
182.79,
179.7,
180.58
],
[
1780790400000,
180.58,
182.77,
176.43,
177.86
],
[
1780876800000,
177.86,
182.44,
177.65,
180.45
],
[
1780963200000,
180.45,
181.24,
178.12,
180.88
],
[
1781049600000,
180.88,
182.16,
179.55,
180.77
],
[
1781136000000,
180.77,
180.8,
178.93,
178.99
],
[
1781222400000,
178.99,
185.18,
176.88,
182.67
],
[
1781308800000,
182.67,
185.45,
180.96,
183.33
],
[
1781395200000,
183.33,
184.36,
181.6,
182.33
],
[
1781481600000,
182.33,
184.08,
180.4,
181.39
],
[
1781568000000,
181.39,
182.83,
177.87,
178.29
],
[
1781654400000,
178.29,
179.17,
177.58,
178.1
],
[
1781740800000,
178.1,
180.74,
173.71,
175.14
],
[
1781827200000,
175.14,
177.75,
171.28,
172.4
],
[
1781913600000,
172.4,
174.42,
170.99,
173.93
],
[
1782000000000,
173.93,
178.03,
172.14,
177.52
],
[
1782086400000,
177.52,
178.69,
174.97,
176.95
],
[
1782172800000,
176.95,
179.1,
172.7,
174.81
],
[
1782259200000,
174.81,
174.89,
171.79,
172.14
],
[
1782345600000,
172.14,
174.21,
171.5,
173.22
],
[
1782432000000,
173.22,
174.77,
172.95,
173.41
],
[
1782518400000,
173.41,
177.82,
171.41,
176.9
],
[
1782604800000,
176.9,
178.67,
172.97,
175.38
],
[
1782691200000,
175.38,
176.54,
172.86,
175.28
],
[
1782777600000,
175.28,
177.85,
174.35,
175.19
],
[
1782864000000,
175.19,
179.69,
173.24,
177.39
],
[
1782950400000,
177.39,
180.15,
175.98,
177.94
],
[
1783036800000,
177.94,
178.86,
175.88,
176.71
],
[
1783123200000,
176.71,
178.21,
174.74,
176.47
],
[
1783209600000,
176.47,
177.77,
172.34,
173.53
],
[
1783296000000,
173.53,
175.35,
169.27,
170.26
],
[
1783382400000,
170.26,
172.65,
169.71,
170.03
],
[
1783468800000,
170.03,
170.78,
168.63,
169.68
],
[
1783555200000,
169.68,
170.61,
166.29,
168.08
],
[
1783641600000,
168.08,
171.19,
166.88,
171.14
],
[
1783728000000,
171.14,
174.87,
170.82,
173.48
],
[
1783814400000,
173.48,
173.82,
170.82,
172.93
],
[
1783900800000,
172.93,
173.13,
170.78,
172.32
],
[
1783987200000,
172.32,
172.98,
170.34,
171.33
],
[
1784073600000,
171.33,
172.91,
169.67,
170.19
],
[
1784160000000,
170.19,
172.72,
168.36,
168.86
],
[
1784246400000,
168.86,
171.4,
166.87,
170.09
],
[
1784332800000,
170.09,
171,
167.13,
167.69
],
[
1784419200000,
167.69,
168.11,
164.08,
166.47
],
[
1784505600000,
166.47,
169.6,
165.18,
168.11
],
[
1784592000000,
168.11,
169.09,
167.37,
168.17
],
[
1784678400000,
168.17,
169.2,
166.48,
167.56
],
[
1784764800000,
167.56,
168.45,
166.23,
166.5
],
[
1784851200000,
166.5,
169.19,
166.47,
168.16
],
[
1784937600000,
168.16,
169.51,
166.81,
167.29
],
[
1785024000000,
167.29,
172.23,
164.87,
169.9
],
[
1785110400000,
169.9,
172.64,
168.6,
172.04
],
[
1785196800000,
172.04,
174.29,
168.02,
170.09
],
[
1785283200000,
170.09,
174.42,
168.49,
173.52
],
[
1785369600000,
173.52,
177.21,
173.2,
174.87
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
OHLC bars
Highcharts demo ↗
The classic open-high-low-close bar — same data shape as candlestick, chart.type = "ohlc".
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "ohlc"
},
title: {
text: "AAPL — Q3 2026"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime",
labels: {
format: "{value:%b %d}"
}
},
yAxis: {
title: {
text: "USD"
}
},
series: [
{
type: "ohlc",
name: "AAPL",
data: [
[
1780272000000,
182.4,
183.84,
176.93,
178.9
],
[
1780358400000,
178.9,
179.91,
176.83,
177.35
],
[
1780444800000,
177.35,
182.26,
175.94,
180.87
],
[
1780531200000,
180.87,
181.16,
177.07,
179.26
],
[
1780617600000,
179.26,
183.52,
178.6,
182.28
],
[
1780704000000,
182.28,
182.79,
179.7,
180.58
],
[
1780790400000,
180.58,
182.77,
176.43,
177.86
],
[
1780876800000,
177.86,
182.44,
177.65,
180.45
],
[
1780963200000,
180.45,
181.24,
178.12,
180.88
],
[
1781049600000,
180.88,
182.16,
179.55,
180.77
],
[
1781136000000,
180.77,
180.8,
178.93,
178.99
],
[
1781222400000,
178.99,
185.18,
176.88,
182.67
],
[
1781308800000,
182.67,
185.45,
180.96,
183.33
],
[
1781395200000,
183.33,
184.36,
181.6,
182.33
],
[
1781481600000,
182.33,
184.08,
180.4,
181.39
],
[
1781568000000,
181.39,
182.83,
177.87,
178.29
],
[
1781654400000,
178.29,
179.17,
177.58,
178.1
],
[
1781740800000,
178.1,
180.74,
173.71,
175.14
],
[
1781827200000,
175.14,
177.75,
171.28,
172.4
],
[
1781913600000,
172.4,
174.42,
170.99,
173.93
],
[
1782000000000,
173.93,
178.03,
172.14,
177.52
],
[
1782086400000,
177.52,
178.69,
174.97,
176.95
],
[
1782172800000,
176.95,
179.1,
172.7,
174.81
],
[
1782259200000,
174.81,
174.89,
171.79,
172.14
],
[
1782345600000,
172.14,
174.21,
171.5,
173.22
],
[
1782432000000,
173.22,
174.77,
172.95,
173.41
],
[
1782518400000,
173.41,
177.82,
171.41,
176.9
],
[
1782604800000,
176.9,
178.67,
172.97,
175.38
],
[
1782691200000,
175.38,
176.54,
172.86,
175.28
],
[
1782777600000,
175.28,
177.85,
174.35,
175.19
],
[
1782864000000,
175.19,
179.69,
173.24,
177.39
],
[
1782950400000,
177.39,
180.15,
175.98,
177.94
],
[
1783036800000,
177.94,
178.86,
175.88,
176.71
],
[
1783123200000,
176.71,
178.21,
174.74,
176.47
],
[
1783209600000,
176.47,
177.77,
172.34,
173.53
],
[
1783296000000,
173.53,
175.35,
169.27,
170.26
],
[
1783382400000,
170.26,
172.65,
169.71,
170.03
],
[
1783468800000,
170.03,
170.78,
168.63,
169.68
],
[
1783555200000,
169.68,
170.61,
166.29,
168.08
],
[
1783641600000,
168.08,
171.19,
166.88,
171.14
],
[
1783728000000,
171.14,
174.87,
170.82,
173.48
],
[
1783814400000,
173.48,
173.82,
170.82,
172.93
],
[
1783900800000,
172.93,
173.13,
170.78,
172.32
],
[
1783987200000,
172.32,
172.98,
170.34,
171.33
],
[
1784073600000,
171.33,
172.91,
169.67,
170.19
],
[
1784160000000,
170.19,
172.72,
168.36,
168.86
],
[
1784246400000,
168.86,
171.4,
166.87,
170.09
],
[
1784332800000,
170.09,
171,
167.13,
167.69
],
[
1784419200000,
167.69,
168.11,
164.08,
166.47
],
[
1784505600000,
166.47,
169.6,
165.18,
168.11
],
[
1784592000000,
168.11,
169.09,
167.37,
168.17
],
[
1784678400000,
168.17,
169.2,
166.48,
167.56
],
[
1784764800000,
167.56,
168.45,
166.23,
166.5
],
[
1784851200000,
166.5,
169.19,
166.47,
168.16
],
[
1784937600000,
168.16,
169.51,
166.81,
167.29
],
[
1785024000000,
167.29,
172.23,
164.87,
169.9
],
[
1785110400000,
169.9,
172.64,
168.6,
172.04
],
[
1785196800000,
172.04,
174.29,
168.02,
170.09
],
[
1785283200000,
170.09,
174.42,
168.49,
173.52
],
[
1785369600000,
173.52,
177.21,
173.2,
174.87
]
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Price + volume with event flags
Two y-axes: columns for volume below, price line above; the flags series (ships with stock) pins events to the price series via onSeries.
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
animation: false
},
title: {
text: "Price, volume & events"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
xAxis: {
type: "datetime"
},
yAxis: [
{
title: {
text: "Price"
},
height: "60%",
lineWidth: 1
},
{
title: {
text: "Volume"
},
top: "65%",
height: "35%",
offset: 0,
lineWidth: 1
}
],
series: [
{
type: "line",
id: "price",
name: "Close",
data: [
[
1780272000000,
178.9
],
[
1780358400000,
177.35
],
[
1780444800000,
180.87
],
[
1780531200000,
179.26
],
[
1780617600000,
182.28
],
[
1780704000000,
180.58
],
[
1780790400000,
177.86
],
[
1780876800000,
180.45
],
[
1780963200000,
180.88
],
[
1781049600000,
180.77
],
[
1781136000000,
178.99
],
[
1781222400000,
182.67
],
[
1781308800000,
183.33
],
[
1781395200000,
182.33
],
[
1781481600000,
181.39
],
[
1781568000000,
178.29
],
[
1781654400000,
178.1
],
[
1781740800000,
175.14
],
[
1781827200000,
172.4
],
[
1781913600000,
173.93
],
[
1782000000000,
177.52
],
[
1782086400000,
176.95
],
[
1782172800000,
174.81
],
[
1782259200000,
172.14
],
[
1782345600000,
173.22
],
[
1782432000000,
173.41
],
[
1782518400000,
176.9
],
[
1782604800000,
175.38
],
[
1782691200000,
175.28
],
[
1782777600000,
175.19
],
[
1782864000000,
177.39
],
[
1782950400000,
177.94
],
[
1783036800000,
176.71
],
[
1783123200000,
176.47
],
[
1783209600000,
173.53
],
[
1783296000000,
170.26
],
[
1783382400000,
170.03
],
[
1783468800000,
169.68
],
[
1783555200000,
168.08
],
[
1783641600000,
171.14
],
[
1783728000000,
173.48
],
[
1783814400000,
172.93
],
[
1783900800000,
172.32
],
[
1783987200000,
171.33
],
[
1784073600000,
170.19
],
[
1784160000000,
168.86
],
[
1784246400000,
170.09
],
[
1784332800000,
167.69
],
[
1784419200000,
166.47
],
[
1784505600000,
168.11
],
[
1784592000000,
168.17
],
[
1784678400000,
167.56
],
[
1784764800000,
166.5
],
[
1784851200000,
168.16
],
[
1784937600000,
167.29
],
[
1785024000000,
169.9
],
[
1785110400000,
172.04
],
[
1785196800000,
170.09
],
[
1785283200000,
173.52
],
[
1785369600000,
174.87
]
],
marker: {
enabled: false
},
lineWidth: 1.5
},
{
type: "column",
name: "Volume",
yAxis: 1,
data: [
[
1780272000000,
7
],
[
1780358400000,
9
],
[
1780444800000,
10
],
[
1780531200000,
2
],
[
1780617600000,
3
],
[
1780704000000,
5
],
[
1780790400000,
6
],
[
1780876800000,
7
],
[
1780963200000,
9
],
[
1781049600000,
10
],
[
1781136000000,
2
],
[
1781222400000,
3
],
[
1781308800000,
5
],
[
1781395200000,
6
],
[
1781481600000,
7
],
[
1781568000000,
9
],
[
1781654400000,
10
],
[
1781740800000,
2
],
[
1781827200000,
3
],
[
1781913600000,
5
],
[
1782000000000,
6
],
[
1782086400000,
7
],
[
1782172800000,
9
],
[
1782259200000,
10
],
[
1782345600000,
2
],
[
1782432000000,
3
],
[
1782518400000,
5
],
[
1782604800000,
6
],
[
1782691200000,
7
],
[
1782777600000,
9
],
[
1782864000000,
10
],
[
1782950400000,
2
],
[
1783036800000,
3
],
[
1783123200000,
5
],
[
1783209600000,
6
],
[
1783296000000,
7
],
[
1783382400000,
9
],
[
1783468800000,
10
],
[
1783555200000,
2
],
[
1783641600000,
3
],
[
1783728000000,
5
],
[
1783814400000,
6
],
[
1783900800000,
7
],
[
1783987200000,
9
],
[
1784073600000,
10
],
[
1784160000000,
2
],
[
1784246400000,
3
],
[
1784332800000,
5
],
[
1784419200000,
6
],
[
1784505600000,
7
],
[
1784592000000,
9
],
[
1784678400000,
10
],
[
1784764800000,
2
],
[
1784851200000,
3
],
[
1784937600000,
5
],
[
1785024000000,
6
],
[
1785110400000,
7
],
[
1785196800000,
9
],
[
1785283200000,
10
],
[
1785369600000,
2
]
],
color: "#06b6d4"
},
{
type: "flags",
name: "Events",
data: [
{
x: 1781136000000,
title: "E",
text: "Earnings call"
},
{
x: 1782864000000,
title: "D",
text: "Dividend date"
}
],
onSeries: "price",
shape: "circlepin",
width: 16
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
Technical indicators (SMA + Bollinger)
Highcharts demo ↗
Indicator series derive from a base series via linkedTo — here a 14-day SMA and Bollinger bands around the close price.
Module setup. This example needs
3 extra
Highcharts modules:
import "highcharts/modules/stock";
import "highcharts/indicators/indicators";
import "highcharts/indicators/bollinger-bands";
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
animation: false
},
title: {
text: "Close + SMA + Bollinger bands"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: true
},
xAxis: {
type: "datetime"
},
yAxis: {
title: {
text: "USD"
}
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [
{
type: "line",
id: "main",
name: "Close",
data: [
[
1780272000000,
178.9
],
[
1780358400000,
177.35
],
[
1780444800000,
180.87
],
[
1780531200000,
179.26
],
[
1780617600000,
182.28
],
[
1780704000000,
180.58
],
[
1780790400000,
177.86
],
[
1780876800000,
180.45
],
[
1780963200000,
180.88
],
[
1781049600000,
180.77
],
[
1781136000000,
178.99
],
[
1781222400000,
182.67
],
[
1781308800000,
183.33
],
[
1781395200000,
182.33
],
[
1781481600000,
181.39
],
[
1781568000000,
178.29
],
[
1781654400000,
178.1
],
[
1781740800000,
175.14
],
[
1781827200000,
172.4
],
[
1781913600000,
173.93
],
[
1782000000000,
177.52
],
[
1782086400000,
176.95
],
[
1782172800000,
174.81
],
[
1782259200000,
172.14
],
[
1782345600000,
173.22
],
[
1782432000000,
173.41
],
[
1782518400000,
176.9
],
[
1782604800000,
175.38
],
[
1782691200000,
175.28
],
[
1782777600000,
175.19
],
[
1782864000000,
177.39
],
[
1782950400000,
177.94
],
[
1783036800000,
176.71
],
[
1783123200000,
176.47
],
[
1783209600000,
173.53
],
[
1783296000000,
170.26
],
[
1783382400000,
170.03
],
[
1783468800000,
169.68
],
[
1783555200000,
168.08
],
[
1783641600000,
171.14
],
[
1783728000000,
173.48
],
[
1783814400000,
172.93
],
[
1783900800000,
172.32
],
[
1783987200000,
171.33
],
[
1784073600000,
170.19
],
[
1784160000000,
168.86
],
[
1784246400000,
170.09
],
[
1784332800000,
167.69
],
[
1784419200000,
166.47
],
[
1784505600000,
168.11
],
[
1784592000000,
168.17
],
[
1784678400000,
167.56
],
[
1784764800000,
166.5
],
[
1784851200000,
168.16
],
[
1784937600000,
167.29
],
[
1785024000000,
169.9
],
[
1785110400000,
172.04
],
[
1785196800000,
170.09
],
[
1785283200000,
173.52
],
[
1785369600000,
174.87
]
],
lineWidth: 1.5
},
{
type: "sma",
name: "SMA 14",
linkedTo: "main",
params: {
period: 14
},
lineWidth: 1.5
},
{
type: "bollingerbands",
name: "Bollinger",
linkedTo: "main",
params: {
period: 14
},
lineWidth: 1
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;
MACD oscillator panel
Indicators can claim their own axis panel — MACD renders below the price with its signal line and histogram columns.
Module setup. This example needs
3 extra
Highcharts modules:
import "highcharts/modules/stock";
import "highcharts/indicators/indicators";
import "highcharts/indicators/macd";
TypeScript
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
animation: false
},
title: {
text: "Price + MACD"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: true
},
xAxis: {
type: "datetime"
},
yAxis: [
{
title: {
text: "USD"
},
height: "60%",
lineWidth: 1
},
{
title: {
text: "MACD"
},
top: "65%",
height: "35%",
offset: 0,
lineWidth: 1
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [
{
type: "line",
id: "main",
name: "Close",
data: [
[
1780272000000,
178.9
],
[
1780358400000,
177.35
],
[
1780444800000,
180.87
],
[
1780531200000,
179.26
],
[
1780617600000,
182.28
],
[
1780704000000,
180.58
],
[
1780790400000,
177.86
],
[
1780876800000,
180.45
],
[
1780963200000,
180.88
],
[
1781049600000,
180.77
],
[
1781136000000,
178.99
],
[
1781222400000,
182.67
],
[
1781308800000,
183.33
],
[
1781395200000,
182.33
],
[
1781481600000,
181.39
],
[
1781568000000,
178.29
],
[
1781654400000,
178.1
],
[
1781740800000,
175.14
],
[
1781827200000,
172.4
],
[
1781913600000,
173.93
],
[
1782000000000,
177.52
],
[
1782086400000,
176.95
],
[
1782172800000,
174.81
],
[
1782259200000,
172.14
],
[
1782345600000,
173.22
],
[
1782432000000,
173.41
],
[
1782518400000,
176.9
],
[
1782604800000,
175.38
],
[
1782691200000,
175.28
],
[
1782777600000,
175.19
],
[
1782864000000,
177.39
],
[
1782950400000,
177.94
],
[
1783036800000,
176.71
],
[
1783123200000,
176.47
],
[
1783209600000,
173.53
],
[
1783296000000,
170.26
],
[
1783382400000,
170.03
],
[
1783468800000,
169.68
],
[
1783555200000,
168.08
],
[
1783641600000,
171.14
],
[
1783728000000,
173.48
],
[
1783814400000,
172.93
],
[
1783900800000,
172.32
],
[
1783987200000,
171.33
],
[
1784073600000,
170.19
],
[
1784160000000,
168.86
],
[
1784246400000,
170.09
],
[
1784332800000,
167.69
],
[
1784419200000,
166.47
],
[
1784505600000,
168.11
],
[
1784592000000,
168.17
],
[
1784678400000,
167.56
],
[
1784764800000,
166.5
],
[
1784851200000,
168.16
],
[
1784937600000,
167.29
],
[
1785024000000,
169.9
],
[
1785110400000,
172.04
],
[
1785196800000,
170.09
],
[
1785283200000,
173.52
],
[
1785369600000,
174.87
]
],
lineWidth: 1.5
},
{
type: "macd",
name: "MACD",
linkedTo: "main",
yAxis: 1,
params: {
shortPeriod: 12,
longPeriod: 26,
signalPeriod: 9
}
}
]
});
// 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 stock & financial charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"candlestick" | "ohlc" | "line" | … | — | Financial series come from highcharts/modules/stock. |
series[].data |
[timestamp, open, high, low, close][] | — | Candlestick/OHLC data shape. |
rangeSelector.enabled / selected |
boolean / number | true in Stock UI | Preset range buttons; selected = button index. |
navigator.enabled |
boolean | true with stock module | Bottom brush for panning the visible window. |
scrollbar.enabled |
boolean | true with stock module | Draggable bottom scrollbar. |
series[].type (flags) |
"flags" | — | Event markers pinned to another series via onSeries. |
series[].linkedTo (indicators) |
string | — | Series id the indicator computes from. |
series[].params.period |
number | 14 | Indicator window size. |