Solid Gauge

Solid gauges fill a rounded arc proportional to the value — the modern progress ring. They combine highcharts-more (pane/gauge plumbing) with the solid-gauge module, both 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.

Quick start

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

const chart = chartAtom({
    chart: {
        type: "solidgauge"
    },
    title: {
        text: "Storage used"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [
            {
                outerRadius: "100%",
                innerRadius: "78%",
                borderWidth: 0,
                shape: "arc"
            }
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        solidgauge: {
            rounded: true,
            dataLabels: {
                enabled: true,
                format: "{y}%",
                style: {
                    fontSize: "1.6rem",
                    fontWeight: "700"
                }
            }
        }
    },
    series: [
        {
            type: "solidgauge",
            name: "Storage",
            data: [
                68
            ]
        }
    ]
});

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

Live examples

Progress ring

A full-circle pane with an inner background ring; the value fills the arc. The rounded ends come from plotOptions.solidgauge.rounded.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "solidgauge"
    },
    title: {
        text: "Storage used"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [
            {
                outerRadius: "100%",
                innerRadius: "78%",
                borderWidth: 0,
                shape: "arc"
            }
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        solidgauge: {
            rounded: true,
            dataLabels: {
                enabled: true,
                format: "{y}%",
                style: {
                    fontSize: "1.6rem",
                    fontWeight: "700"
                }
            }
        }
    },
    series: [
        {
            type: "solidgauge",
            name: "Storage",
            data: [
                68
            ]
        }
    ]
});

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

Gradient-filled activity ring

colorAxis maps values to a gradient; the gauge picks up the colour automatically — no manual interpolation.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "solidgauge"
    },
    title: {
        text: "Battery"
    },
    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"
            }
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    colorAxis: {
        min: 0,
        max: 100,
        stops: [
            [
                0,
                "#dc2626"
            ],
            [
                0.5,
                "#d97706"
            ],
            [
                1,
                "#16a34a"
            ]
        ],
        visible: false
    },
    plotOptions: {
        solidgauge: {
            rounded: true,
            dataLabels: {
                enabled: true,
                format: "{y}%"
            }
        }
    },
    series: [
        {
            type: "solidgauge",
            name: "Battery",
            data: [
                82
            ]
        }
    ]
});

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

Multiple nested rings

Three series on one axis with per-series radius/innerRadius — the activity-tracker layout.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "solidgauge"
    },
    title: {
        text: "Today's goals"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [
            {
                outerRadius: "100%",
                innerRadius: "84%",
                borderWidth: 0,
                shape: "arc"
            },
            {
                outerRadius: "80%",
                innerRadius: "64%",
                borderWidth: 0,
                shape: "arc"
            },
            {
                outerRadius: "60%",
                innerRadius: "44%",
                borderWidth: 0,
                shape: "arc"
            }
        ]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickWidth: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        solidgauge: {
            rounded: true,
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "solidgauge",
            name: "Move 78%",
            yAxis: 0,
            data: [
                {
                    y: 78,
                    radius: "92%",
                    innerRadius: "86%"
                }
            ]
        },
        {
            type: "solidgauge",
            name: "Exercise 54%",
            yAxis: 0,
            data: [
                {
                    y: 54,
                    radius: "72%",
                    innerRadius: "66%"
                }
            ]
        },
        {
            type: "solidgauge",
            name: "Stand 91%",
            yAxis: 0,
            data: [
                {
                    y: 91,
                    radius: "52%",
                    innerRadius: "46%"
                }
            ]
        }
    ]
});

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

Option	Type	Default	Description
`chart.type`	"solidgauge"	—	Requires mates-charts/modules/solid-gauge (or the full modules bundle).
`pane.startAngle / endAngle`	number	0 / 360	0…360 = full ring; -90…90 = top half arc.
`pane.background[]`	{ outerRadius, innerRadius, shape }[]	—	Static track rings behind the value arc.
`plotOptions.solidgauge.rounded`	boolean	false	Round the ends of the value arc.
`series[].data[].radius / innerRadius`	string	—	Per-series ring position for nested gauges.
`colorAxis.stops`	[stop, color][]	—	Gradient mapping value → colour.