Polar & Radar

Set chart.polar = true and every cartesian series wraps around a circle: line series become radar/spider webs, stacked columns become wind roses. Ships in highcharts-more, 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: "area",
        polar: true
    },
    title: {
        text: "Framework scorecard"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "DX",
            "Performance",
            "Ecosystem",
            "Types",
            "Bundle size",
            "Stability"
        ],
        tickmarkPlacement: "on",
        lineWidth: 0
    },
    yAxis: {
        gridLineInterpolation: "polygon",
        min: 0,
        max: 10,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        area: {
            marker: {
                enabled: false
            },
            fillOpacity: 0.18,
            lineWidth: 2
        }
    },
    series: [
        {
            type: "area",
            name: "mates-charts",
            data: [
                9,
                8,
                6,
                9,
                8,
                7
            ]
        },
        {
            type: "area",
            name: "Raw Highcharts",
            data: [
                6,
                9,
                9,
                5,
                4,
                9
            ]
        }
    ]
});

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

Live examples

Radar / spider web Highcharts demo ↗

Categories become spokes; grid line interpolation controls the web. Compare entities across 3–8 axes.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area",
        polar: true
    },
    title: {
        text: "Framework scorecard"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "DX",
            "Performance",
            "Ecosystem",
            "Types",
            "Bundle size",
            "Stability"
        ],
        tickmarkPlacement: "on",
        lineWidth: 0
    },
    yAxis: {
        gridLineInterpolation: "polygon",
        min: 0,
        max: 10,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        area: {
            marker: {
                enabled: false
            },
            fillOpacity: 0.18,
            lineWidth: 2
        }
    },
    series: [
        {
            type: "area",
            name: "mates-charts",
            data: [
                9,
                8,
                6,
                9,
                8,
                7
            ]
        },
        {
            type: "area",
            name: "Raw Highcharts",
            data: [
                6,
                9,
                9,
                5,
                4,
                9
            ]
        }
    ]
});

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

Wind rose (stacked polar columns) Highcharts demo ↗

Polar columns with normal stacking — the classic wind-rose layout, equally good for radial time-of-day data.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column",
        polar: true
    },
    title: {
        text: "Requests by hour"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "00",
            "03",
            "06",
            "09",
            "12",
            "15",
            "18",
            "21"
        ],
        tickmarkPlacement: "on",
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        column: {
            stacking: "normal",
            pointPadding: 0,
            groupPadding: 0
        }
    },
    series: [
        {
            type: "column",
            name: "2xx",
            data: [
                30,
                22,
                45,
                80,
                95,
                88,
                70,
                50
            ]
        },
        {
            type: "column",
            name: "4xx",
            data: [
                4,
                3,
                6,
                9,
                11,
                8,
                6,
                5
            ]
        },
        {
            type: "column",
            name: "5xx",
            data: [
                1,
                1,
                2,
                1,
                3,
                2,
                1,
                1
            ]
        }
    ]
});

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

Polar area

chart.type = "area" with polar coordinates — filled wedges sized by value, a nightingale-rose variant.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area",
        polar: true
    },
    title: {
        text: "Storage by service"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "API",
            "Media",
            "Backups",
            "Logs",
            "Databases"
        ],
        tickmarkPlacement: "on",
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        labels: {
            enabled: false
        },
        title: {
            text: ""
        }
    },
    plotOptions: {
        area: {
            fillOpacity: 0.35,
            lineWidth: 1.5,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "area",
            name: "TB",
            data: [
                42,
                68,
                25,
                51,
                83
            ]
        }
    ]
});

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

Option	Type	Default	Description
`chart.polar`	boolean	false	Wraps all cartesian series around a circle.
`yAxis.gridLineInterpolation`	"circle" \| "polygon"	"circle"	Radar webs use "polygon"; circular grids suit wind roses.
`xAxis.tickmarkPlacement`	"on" \| "between"	"between"	"on" places spokes exactly on the category labels.
`chart.type`	"line" \| "area" \| "column" \| …	"line"	Any cartesian type works in polar mode.
`plotOptions.series.stacking`	undefined \| "normal"	undefined	Stack polar columns for wind-rose layouts.
`yAxis.min / max`	number	auto	Pin the radial scale so series compare fairly.