Nested donut + spectrum ring
A nested donut (last week inside, this week outside) in the centre of a spectrum column 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": "Throughput",
"data": [
42,
41,
38,
39,
41,
39,
45,
50,
59,
62,
71,
72,
75,
81,
81,
81,
79,
77,
75,
67,
57,
52,
48,
39,
38,
35,
36,
35,
40,
40,
43,
49,
55,
63,
67,
74,
78,
83,
83,
77,
77,
74,
69,
61,
54,
48,
45,
36,
32,
31,
34,
38,
41,
42,
43,
48,
58,
63,
73,
80,
80,
84,
84,
83,
75,
74,
68,
65,
60,
52,
45,
37
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:20",
"00:40",
"01:00",
"01:20",
"01:40",
"02:00",
"02:20",
"02:40",
"03:00",
"03:20",
"03:40",
"04:00",
"04:20",
"04:40",
"05:00",
"05:20",
"05:40",
"06:00",
"06:20",
"06:40",
"07:00",
"07:20",
"07:40",
"08:00",
"08:20",
"08:40",
"09:00",
"09:20",
"09:40",
"10:00",
"10:20",
"10:40",
"11:00",
"11:20",
"11:40",
"12:00",
"12:20",
"12:40",
"13:00",
"13:20",
"13:40",
"14:00",
"14:20",
"14:40",
"15:00",
"15:20",
"15:40",
"16:00",
"16:20",
"16:40",
"17:00",
"17:20",
"17:40",
"18:00",
"18:20",
"18:40",
"19:00",
"19:20",
"19:40",
"20:00",
"20:20",
"20:40",
"21:00",
"21:20",
"21:40",
"22:00",
"22:20",
"22:40",
"23:00",
"23:20",
"23:40"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "mean",
"innerRadius": 0.56,
"layers": [
{
"type": "nestedDonut",
"name": "Traffic mix",
"labels": [
"Web",
"Mobile",
"API",
"Partner"
],
"data": [
{
"name": "Last week",
"data": [
38,
27,
22,
13
]
},
{
"name": "This week",
"data": [
34,
31,
24,
11
]
}
]
}
]
}
}
}
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": "Throughput",
"data": [
42,
41,
38,
39,
41,
39,
45,
50,
59,
62,
71,
72,
75,
81,
81,
81,
79,
77,
75,
67,
57,
52,
48,
39,
38,
35,
36,
35,
40,
40,
43,
49,
55,
63,
67,
74,
78,
83,
83,
77,
77,
74,
69,
61,
54,
48,
45,
36,
32,
31,
34,
38,
41,
42,
43,
48,
58,
63,
73,
80,
80,
84,
84,
83,
75,
74,
68,
65,
60,
52,
45,
37
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:20",
"00:40",
"01:00",
"01:20",
"01:40",
"02:00",
"02:20",
"02:40",
"03:00",
"03:20",
"03:40",
"04:00",
"04:20",
"04:40",
"05:00",
"05:20",
"05:40",
"06:00",
"06:20",
"06:40",
"07:00",
"07:20",
"07:40",
"08:00",
"08:20",
"08:40",
"09:00",
"09:20",
"09:40",
"10:00",
"10:20",
"10:40",
"11:00",
"11:20",
"11:40",
"12:00",
"12:20",
"12:40",
"13:00",
"13:20",
"13:40",
"14:00",
"14:20",
"14:40",
"15:00",
"15:20",
"15:40",
"16:00",
"16:20",
"16:40",
"17:00",
"17:20",
"17:40",
"18:00",
"18:20",
"18:40",
"19:00",
"19:20",
"19:40",
"20:00",
"20:20",
"20:40",
"21:00",
"21:20",
"21:40",
"22:00",
"22:20",
"22:40",
"23:00",
"23:20",
"23:40"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "mean",
"innerRadius": 0.56,
"layers": [
{
"type": "nestedDonut",
"name": "Traffic mix",
"labels": [
"Web",
"Mobile",
"API",
"Partner"
],
"data": [
{
"name": "Last week",
"data": [
38,
27,
22,
13
]
},
{
"name": "This week",
"data": [
34,
31,
24,
11
]
}
]
}
]
}
}
}
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-nested.json --out radial-column-nested.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/nested/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?