Three inner layers
Pie, donut and nested donut inside one column ring; every layer has its own legend entries, tooltip and keyboard group (PageDown).
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": 520,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Orders",
"data": [
48,
50,
59,
64,
67,
68,
69,
64,
60,
57,
49,
42,
37,
33,
31,
30,
29,
34,
36,
41,
49,
54,
61,
64,
69,
70,
66,
62,
61,
59,
50,
43,
34,
32,
27,
24,
29,
28,
34,
37,
47,
53,
60,
68,
69,
67,
70,
67,
66,
57,
48,
42,
33,
30,
29,
24,
27,
29,
35,
43
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:24",
"00:48",
"01:12",
"01:36",
"02:00",
"02:24",
"02:48",
"03:12",
"03:36",
"04:00",
"04:24",
"04:48",
"05:12",
"05:36",
"06:00",
"06:24",
"06:48",
"07:12",
"07:36",
"08:00",
"08:24",
"08:48",
"09:12",
"09:36",
"10:00",
"10:24",
"10:48",
"11:12",
"11:36",
"12:00",
"12:24",
"12:48",
"13:12",
"13:36",
"14:00",
"14:24",
"14:48",
"15:12",
"15:36",
"16:00",
"16:24",
"16:48",
"17:12",
"17:36",
"18:00",
"18:24",
"18:48",
"19:12",
"19:36",
"20:00",
"20:24",
"20:48",
"21:12",
"21:36",
"22:00",
"22:24",
"22:48",
"23:12",
"23:36"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"layers": [
{
"type": "pie",
"name": "Channel",
"labels": [
"Direct",
"Retail",
"Online"
],
"data": [
44,
31,
25
]
},
{
"type": "donut",
"name": "Region",
"labels": [
"EMEA",
"Americas",
"APAC",
"Other"
],
"data": [
36,
33,
22,
9
]
},
{
"type": "nestedDonut",
"name": "Plan",
"labels": [
"Basic",
"Pro",
"Enterprise"
],
"data": [
[
50,
35,
15
],
[
42,
38,
20
]
]
}
]
}
}
}
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": 520,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Orders",
"data": [
48,
50,
59,
64,
67,
68,
69,
64,
60,
57,
49,
42,
37,
33,
31,
30,
29,
34,
36,
41,
49,
54,
61,
64,
69,
70,
66,
62,
61,
59,
50,
43,
34,
32,
27,
24,
29,
28,
34,
37,
47,
53,
60,
68,
69,
67,
70,
67,
66,
57,
48,
42,
33,
30,
29,
24,
27,
29,
35,
43
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:24",
"00:48",
"01:12",
"01:36",
"02:00",
"02:24",
"02:48",
"03:12",
"03:36",
"04:00",
"04:24",
"04:48",
"05:12",
"05:36",
"06:00",
"06:24",
"06:48",
"07:12",
"07:36",
"08:00",
"08:24",
"08:48",
"09:12",
"09:36",
"10:00",
"10:24",
"10:48",
"11:12",
"11:36",
"12:00",
"12:24",
"12:48",
"13:12",
"13:36",
"14:00",
"14:24",
"14:48",
"15:12",
"15:36",
"16:00",
"16:24",
"16:48",
"17:12",
"17:36",
"18:00",
"18:24",
"18:48",
"19:12",
"19:36",
"20:00",
"20:24",
"20:48",
"21:12",
"21:36",
"22:00",
"22:24",
"22:48",
"23:12",
"23:36"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"layers": [
{
"type": "pie",
"name": "Channel",
"labels": [
"Direct",
"Retail",
"Online"
],
"data": [
44,
31,
25
]
},
{
"type": "donut",
"name": "Region",
"labels": [
"EMEA",
"Americas",
"APAC",
"Other"
],
"data": [
36,
33,
22,
9
]
},
{
"type": "nestedDonut",
"name": "Plan",
"labels": [
"Basic",
"Pro",
"Enterprise"
],
"data": [
[
50,
35,
15
],
[
42,
38,
20
]
]
}
]
}
}
}
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-layers.json --out radial-column-layers.svg --with-tablePublic 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/layers/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?