Sunburst
Sunburst draws a hierarchy as concentric rings — each level further out, sized by value. The same { id, parent, value } point format powers treemap's hierarchical mode.
import "highcharts/modules/sunburst";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.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "sunburst"
},
title: {
text: "Headcount by department"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
plotOptions: {
sunburst: {
borderRadius: 3,
dataLabels: {
enabled: true,
format: "{point.name}"
}
}
},
series: [
{
type: "sunburst",
borderWidth: 1,
data: [
{
id: "0.0",
parent: "",
name: "Company"
},
{
id: "1",
parent: "0.0",
name: "Engineering",
value: 46
},
{
id: "2",
parent: "0.0",
name: "Sales",
value: 22
},
{
id: "3",
parent: "0.0",
name: "Support",
value: 14
},
{
id: "1.1",
parent: "1",
name: "Frontend",
value: 18
},
{
id: "1.2",
parent: "1",
name: "Backend",
value: 20
},
{
id: "1.3",
parent: "1",
name: "Platform",
value: 8
},
{
id: "2.1",
parent: "2",
name: "EMEA",
value: 12
},
{
id: "2.2",
parent: "2",
name: "Americas",
value: 10
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;Live examples
Define each node with an id, a parent id, and either children of its own or a value. Leaf nodes carry the size; parents organise the rings.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "sunburst"
},
title: {
text: "Headcount by department"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
plotOptions: {
sunburst: {
borderRadius: 3,
dataLabels: {
enabled: true,
format: "{point.name}"
}
}
},
series: [
{
type: "sunburst",
borderWidth: 1,
data: [
{
id: "0.0",
parent: "",
name: "Company"
},
{
id: "1",
parent: "0.0",
name: "Engineering",
value: 46
},
{
id: "2",
parent: "0.0",
name: "Sales",
value: 22
},
{
id: "3",
parent: "0.0",
name: "Support",
value: 14
},
{
id: "1.1",
parent: "1",
name: "Frontend",
value: 18
},
{
id: "1.2",
parent: "1",
name: "Backend",
value: 20
},
{
id: "1.3",
parent: "1",
name: "Platform",
value: 8
},
{
id: "2.1",
parent: "2",
name: "EMEA",
value: 12
},
{
id: "2.2",
parent: "2",
name: "Americas",
value: 10
}
]
}
]
});
// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
html`<div style="height: 22rem">${Chart(chart)}</div>`;levelIsConstant = false grows ring widths with depth; per-level dataLabels keep outer rings readable.
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";
const chart = chartAtom({
chart: {
type: "sunburst"
},
title: {
text: "Spend taxonomy"
},
credits: {
enabled: false
},
colors: [
"#00968c",
"#06b6d4",
"#d97706",
"#7c3aed",
"#dc2626",
"#16a34a",
"#0172ad",
"#9333ea"
],
legend: {
enabled: false
},
plotOptions: {
sunburst: {
borderRadius: 3,
levelIsConstant: false,
dataLabels: {
enabled: true,
format: "{point.name}"
}
}
},
series: [
{
type: "sunburst",
borderWidth: 1,
data: [
{
id: "0.0",
parent: "",
name: "Spend"
},
{
id: "cloud",
parent: "0.0",
name: "Cloud"
},
{
id: "compute",
parent: "cloud",
name: "Compute"
},
{
name: "On-demand",
parent: "compute",
value: 210
},
{
name: "Reserved",
parent: "compute",
value: 160
},
{
id: "storage",
parent: "cloud",
name: "Storage"
},
{
name: "Object",
parent: "storage",
value: 90
},
{
name: "Block",
parent: "storage",
value: 45
},
{
id: "saas",
parent: "0.0",
name: "SaaS"
},
{
name: "CI/CD",
parent: "saas",
value: 60
},
{
name: "Observability",
parent: "saas",
value: 75
}
]
}
]
});
// 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 sunburst charts. See the full Highcharts API for everything else.
| Option | Type | Default | Description |
|---|---|---|---|
chart.type |
"sunburst" | — | Registered by mates-charts (Tier A) or highcharts/modules/sunburst. |
series[].data |
{ id, parent, name, value }[] | — | Nodes link by id → parent; leaves carry the value. |
plotOptions.sunburst.borderRadius |
number | 0 | Rounds each ring segment. |
plotOptions.sunburst.levelIsConstant |
boolean | true | Keep ring widths constant across levels. |
plotOptions.sunburst.dataLabels.enabled |
boolean | true | Label segments; rotate follows the ring. |
series[].levelSize |
{ unit: "weight" | "percentage", value } | — | Control ring thickness per level. |