Customising charts

mates-charts passes your config straight through to Highcharts — there is no separate styling API to learn. Every option from the Highcharts API reference works exactly as documented. Below are the tweaks you'll reach for most, each with a live chart and its copy-paste snippet.

Same config object. If Highcharts documents it, you can pass it to chartAtom(…) — titles, tooltips, labels, axes, events, responsive rules and everything else. The examples below are plain Highcharts options.

Hide the chrome

Turn off everything you don't need: an empty string removes the title, legend.enabled and credits.enabled control their blocks, and each axis hides independently. A chart in a card or widget often looks best with all of it off.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column",
        height: 300
    },
    title: {
        text: ""
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Q1",
            "Q2",
            "Q3",
            "Q4"
        ],
        visible: false
    },
    yAxis: {
        visible: false
    },
    series: [
        {
            type: "column",
            name: "Revenue",
            data: [
                42,
                55,
                48,
                63
            ],
            borderRadius: 6
        }
    ]
});

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

Highcharts API reference: chart.title · chart.legend · xAxis.visible

Tooltip styling

The tooltip is fully themeable: background, border, corner shape, text style, or a formatter for complete control. Use shared for multi-series hover and valueSuffix for quick units.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "line",
        height: 300
    },
    title: {
        text: "Tooltip styling"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ]
    },
    yAxis: {
        title: {
            text: "$k"
        }
    },
    tooltip: {
        backgroundColor: "rgba(15, 23, 42, 0.95)",
        borderColor: "#00968c",
        borderRadius: 10,
        shape: "round",
        style: {
            color: "#f0f0f0",
            fontWeight: "600"
        },
        shared: true,
        valueSuffix: "k"
    },
    series: [
        {
            type: "line",
            name: "Revenue",
            data: [
                12,
                19,
                15,
                25,
                22,
                30
            ]
        },
        {
            type: "line",
            name: "Costs",
            data: [
                8,
                12,
                14,
                13,
                18,
                16
            ]
        }
    ]
});

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

Highcharts API reference: chart.tooltip · tooltip.formatter

Data labels

Print values on the chart with dataLabels.enabled; format uses Highcharts' template syntax, and style covers fonts and colours. Per-point overrides work by passing point objects instead of numbers.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column",
        height: 300
    },
    title: {
        text: "Deploys per week"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri"
        ]
    },
    yAxis: {
        title: {
            text: "Deploys"
        },
        maxPadding: 0.25
    },
    plotOptions: {
        column: {
            borderRadius: 6,
            dataLabels: {
                enabled: true,
                format: "{y} deploys",
                style: {
                    fontWeight: "700",
                    fontSize: "0.8rem"
                }
            }
        }
    },
    series: [
        {
            type: "column",
            name: "Deploys",
            data: [
                14,
                9,
                22,
                17,
                11
            ]
        }
    ]
});

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

Highcharts API reference: plotOptions.series.dataLabels

Colors & palettes

Override the palette per chart with colors, or per point with colorByPoint and explicit color values. Gradients are plain SVG/CSS linear-gradients in fillColor.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column",
        height: 300
    },
    title: {
        text: "Color per point"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Design",
            "Build",
            "Test",
            "Ship"
        ]
    },
    yAxis: {
        visible: false
    },
    plotOptions: {
        column: {
            borderRadius: 6
        }
    },
    series: [
        {
            type: "column",
            name: "Progress",
            colorByPoint: true,
            data: [
                {
                    y: 8,
                    color: "#00968c"
                },
                {
                    y: 12,
                    color: "#06b6d4"
                },
                {
                    y: 9,
                    color: "#d97706"
                },
                {
                    y: 15,
                    color: "#7c3aed"
                }
            ]
        }
    ]
});

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

Highcharts API reference: colors · plotOptions.series.colorByPoint

Axis styling

Grid lines, tick marks, axis titles, label formatting, reversal — every axis is a config object. Common tweaks: soften grids with gridLineColor, hide ticks with tickLength: 0, and format labels with labels.format.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "line",
        height: 300
    },
    title: {
        text: "Styled axes"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ],
        lineColor: "#00968c",
        tickLength: 0,
        labels: {
            style: {
                color: "#00968c",
                fontWeight: "600"
            }
        }
    },
    yAxis: {
        title: {
            text: "Revenue ($k)",
            style: {
                color: "#94a3b8"
            }
        },
        gridLineColor: "rgba(148, 163, 184, 0.2)",
        gridLineDashStyle: "Dot",
        reversed: false
    },
    series: [
        {
            type: "line",
            name: "Revenue",
            data: [
                12,
                19,
                15,
                25,
                22,
                30
            ],
            lineWidth: 2.5
        }
    ]
});

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

Highcharts API reference: xAxis · yAxis.gridLineDashStyle

Spacing, margins & sizing

chart.margin and chart.spacing control the gap between the chart and its container — tighten them for card-sized charts. The rendered chart fills its wrapper; the wrapper sets the height.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area",
        height: 300,
        margin: [
            4,
            4,
            24,
            4
        ],
        spacing: [
            2,
            2,
            2,
            2
        ]
    },
    title: {
        text: ""
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ],
        visible: false
    },
    yAxis: {
        visible: false
    },
    plotOptions: {
        area: {
            fillOpacity: 0.35,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "area",
            name: "Sessions",
            data: [
                32,
                40,
                38,
                52,
                49,
                60
            ]
        }
    ]
});

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

Highcharts API reference: chart.margin · chart.spacing

Global defaults with setOptions

mates-charts re-exports the full Highcharts namespace — set app-wide defaults (fonts, colours, locale) once at startup and every chart inherits them.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column",
        height: 300
    },
    title: {
        text: "Inherits global defaults"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "A",
            "B",
            "C"
        ]
    },
    yAxis: {
        title: {
            text: "Value"
        }
    },
    series: [
        {
            type: "column",
            name: "Demo",
            data: [
                5,
                9,
                7
            ]
        }
    ]
});

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

Highcharts API reference: Highcharts.setOptions

Where to go next

The complete option surface — including responsive rules, events, localization and the styled-mode CSS option — lives in Highcharts' API reference and documentation. For the reactive side (updating charts from atoms), see the dynamic charts family, and for the programmatic escape hatch, the API reference page.