Sunburst + column ring
Quarters and months as a sunburst; hovering a quarter highlights its three months on the outer ring.
Ring & inner layers
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
const options = {
"chart": {
"type": "radialColumn",
"height": 500,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Revenue",
"data": [
42,
38,
51,
47,
55,
61,
58,
66,
72,
69,
78,
84
]
}
],
"xaxis": {
"categories": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"plotOptions": {
"radialColumn": {
"fill": {
"type": "value",
"stops": [
"#3b82f6",
"#8b5cf6",
"#d946ef"
]
},
"layers": [
{
"type": "sunburst",
"name": "By quarter",
"data": [
{
"x": "Q1",
"children": [
{
"x": "Jan",
"y": 42
},
{
"x": "Feb",
"y": 38
},
{
"x": "Mar",
"y": 51
}
]
},
{
"x": "Q2",
"children": [
{
"x": "Apr",
"y": 47
},
{
"x": "May",
"y": 55
},
{
"x": "Jun",
"y": 61
}
]
},
{
"x": "Q3",
"children": [
{
"x": "Jul",
"y": 58
},
{
"x": "Aug",
"y": 66
},
{
"x": "Sep",
"y": 72
}
]
},
{
"x": "Q4",
"children": [
{
"x": "Oct",
"y": 69
},
{
"x": "Nov",
"y": 78
},
{
"x": "Dec",
"y": 84
}
]
}
]
}
]
}
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 500,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Revenue",
"data": [
42,
38,
51,
47,
55,
61,
58,
66,
72,
69,
78,
84
]
}
],
"xaxis": {
"categories": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"plotOptions": {
"radialColumn": {
"fill": {
"type": "value",
"stops": [
"#3b82f6",
"#8b5cf6",
"#d946ef"
]
},
"layers": [
{
"type": "sunburst",
"name": "By quarter",
"data": [
{
"x": "Q1",
"children": [
{
"x": "Jan",
"y": 42
},
{
"x": "Feb",
"y": 38
},
{
"x": "Mar",
"y": 51
}
]
},
{
"x": "Q2",
"children": [
{
"x": "Apr",
"y": 47
},
{
"x": "May",
"y": 55
},
{
"x": "Jun",
"y": 61
}
]
},
{
"x": "Q3",
"children": [
{
"x": "Jul",
"y": 58
},
{
"x": "Aug",
"y": 66
},
{
"x": "Sep",
"y": 72
}
]
},
{
"x": "Q4",
"children": [
{
"x": "Oct",
"y": 69
},
{
"x": "Nov",
"y": 78
},
{
"x": "Dec",
"y": 84
}
]
}
]
}
]
}
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render() Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export radial-column-sunburst.json --out radial-column-sunburst.svg --with-table Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/radial-column/sunburst/index.md … This example uses Premium modules. Compare licences · Embedding in a distributed product?