Gauge

Gauges render a single value on a dial. The gauge series lives in the highcharts-more add-on, which mates-charts loads for you — one import at app startup is all it takes.

Module setup. mates-charts/modules loads Highcharts core and highcharts-more itself, then registers every optional type — import order never matters.

import "mates-charts/modules";

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: "gauge"
    },
    title: {
        text: "Customer score"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    yAxis: {
        min: 0,
        max: 100,
        tickInterval: 20,
        title: {
            text: ""
        },
        labels: {
            format: "{value}"
        }
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: true,
                format: "{y}",
                style: {
                    fontSize: "1.6rem",
                    fontWeight: "700"
                }
            },
            dial: {
                backgroundColor: "#00968c",
                baseWidth: 6,
                rearLength: "20%"
            },
            pivot: {
                backgroundColor: "#00968c",
                radius: 6
            }
        }
    },
    series: [
        {
            type: "gauge",
            name: "Score",
            data: [
                72
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Live examples

Speedometer gauge Highcharts demo ↗

pane angles define the arc; yAxis bounds map the value scale; dataLabels print the current value.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "gauge"
    },
    title: {
        text: "Customer score"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    yAxis: {
        min: 0,
        max: 100,
        tickInterval: 20,
        title: {
            text: ""
        },
        labels: {
            format: "{value}"
        }
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: true,
                format: "{y}",
                style: {
                    fontSize: "1.6rem",
                    fontWeight: "700"
                }
            },
            dial: {
                backgroundColor: "#00968c",
                baseWidth: 6,
                rearLength: "20%"
            },
            pivot: {
                backgroundColor: "#00968c",
                radius: 6
            }
        }
    },
    series: [
        {
            type: "gauge",
            name: "Score",
            data: [
                72
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Dual dials Highcharts demo ↗

Two series on two y-axes — each dial gets its own scale and colour while sharing the pane.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "gauge"
    },
    title: {
        text: "Input vs output"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    yAxis: [
        {
            min: 0,
            max: 200,
            tickInterval: 50,
            title: {
                text: ""
            },
            labels: {
                enabled: false
            }
        },
        {
            min: 0,
            max: 100,
            tickInterval: 25,
            title: {
                text: ""
            },
            labels: {
                enabled: false
            }
        }
    ],
    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: true,
                borderWidth: 0,
                style: {
                    fontSize: "1rem",
                    fontWeight: "700"
                }
            }
        }
    },
    series: [
        {
            type: "gauge",
            name: "Input",
            yAxis: 0,
            data: [
                140
            ],
            dial: {
                backgroundColor: "#06b6d4"
            }
        },
        {
            type: "gauge",
            name: "Output",
            yAxis: 1,
            data: [
                66
            ],
            dial: {
                backgroundColor: "#00968c"
            }
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Progress arc with zones

yAxis.zones colour the scale bands; the dial sweeps through green → amber → red as the value climbs.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "gauge"
    },
    title: {
        text: "Capacity"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: -120,
        endAngle: 120
    },
    yAxis: {
        min: 0,
        max: 100,
        tickInterval: 25,
        title: {
            text: ""
        },
        plotBands: [
            {
                from: 0,
                to: 60,
                color: "rgba(22, 163, 74, 0.5)"
            },
            {
                from: 60,
                to: 85,
                color: "rgba(217, 119, 6, 0.5)"
            },
            {
                from: 85,
                to: 100,
                color: "rgba(220, 38, 38, 0.5)"
            }
        ]
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: true,
                format: "{y}%"
            }
        }
    },
    series: [
        {
            type: "gauge",
            name: "Capacity",
            data: [
                68
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

VU meter Highcharts demo ↗

A narrow arc with dense ticks and red-lined peaks — the broadcast meter look, all standard gauge options.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "gauge"
    },
    title: {
        text: "Audio level"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: -45,
        endAngle: 45,
        size: "100%"
    },
    yAxis: {
        min: -20,
        max: 6,
        tickPosition: "inside",
        tickLength: 10,
        tickWidth: 1,
        tickColor: "#666",
        labels: {
            distance: 8,
            format: "{value}"
        },
        title: {
            text: ""
        },
        plotBands: [
            {
                from: 0,
                to: 6,
                color: "rgba(220, 38, 38, 0.6)"
            },
            {
                from: -10,
                to: 0,
                color: "rgba(217, 119, 6, 0.5)"
            }
        ]
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: true,
                format: "{y} dB",
                borderWidth: 0
            }
        }
    },
    series: [
        {
            type: "gauge",
            name: "Level",
            data: [
                -3
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Activity rings (rounded gauge) Highcharts demo ↗

Three concentric solid-gauge rings with rounded caps — the activity-tracker look, built from pane backgrounds plus per-series radii.

TypeScript

import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "solidgauge"
    },
    title: {
        text: "Daily activity"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [
            {
                outerRadius: "100%",
                innerRadius: "80%",
                borderWidth: 0,
                shape: "arc"
            },
            {
                outerRadius: "78%",
                innerRadius: "58%",
                borderWidth: 0,
                shape: "arc"
            },
            {
                outerRadius: "56%",
                innerRadius: "36%",
                borderWidth: 0,
                shape: "arc"
            }
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        solidgauge: {
            dataLabels: {
                enabled: false
            },
            rounded: true,
            stickyTracking: false
        }
    },
    series: [
        {
            type: "solidgauge",
            name: "Move",
            yAxis: 0,
            data: [
                {
                    y: 78,
                    radius: "90%",
                    innerRadius: "82%"
                }
            ]
        },
        {
            type: "solidgauge",
            name: "Exercise",
            yAxis: 0,
            data: [
                {
                    y: 54,
                    radius: "68%",
                    innerRadius: "60%"
                }
            ]
        },
        {
            type: "solidgauge",
            name: "Stand",
            yAxis: 0,
            data: [
                {
                    y: 91,
                    radius: "46%",
                    innerRadius: "38%"
                }
            ]
        }
    ]
});

// 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 gauge charts. See the full Highcharts API for everything else.

Option	Type	Default	Description
`chart.type`	"gauge"	—	Requires mates-charts/modules (or highcharts/highcharts-more) to be imported first.
`pane.startAngle / endAngle`	number	0 / 360	Arc sweep in degrees — -120…120 gives a classic speedometer.
`yAxis.min / max`	number	0 / 100	Value range the dial maps to.
`yAxis.zones`	{from, to, color}[]	—	Coloured bands along the scale.
`plotOptions.gauge.dial`	object	—	Needle styling: backgroundColor, baseWidth, baseLength, rearLength.
`plotOptions.gauge.pivot`	object	—	Centre pin styling: backgroundColor, radius, borderWidth.
`plotOptions.gauge.dataLabels`	DataLabelsOptions	—	Print the live value; format = "{y}".
`series[].yAxis`	number	0	Assign a series to a second y-axis for dual dials.