Day parts aligned to a 24 h ring
Correlated semantics with angular alignment: each day part spans exactly its 24 quarter hours. Hover a day part to light its bars (and the bracket on the rim); hover a bar to light its day part; click to keep the selection, Esc clears.
Linked 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": "Visits",
"data": [
17,
15,
12,
13,
15,
18,
20,
23,
24,
27,
29,
32,
36,
35,
38,
39,
38,
40,
40,
39,
37,
35,
35,
33,
32,
32,
31,
28,
25,
22,
22,
16,
17,
19,
23,
29,
29,
34,
42,
45,
45,
48,
60,
61,
66,
74,
75,
80,
76,
79,
76,
76,
67,
65,
60,
54,
46,
36,
32,
31,
28,
25,
20,
18,
14,
12,
13,
15,
13,
14,
16,
19,
23,
25,
28,
29,
31,
35,
38,
40,
41,
42,
40,
38,
34,
32,
28,
28,
27,
23,
22,
21,
18,
14,
15,
13
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:15",
"00:30",
"00:45",
"01:00",
"01:15",
"01:30",
"01:45",
"02:00",
"02:15",
"02:30",
"02:45",
"03:00",
"03:15",
"03:30",
"03:45",
"04:00",
"04:15",
"04:30",
"04:45",
"05:00",
"05:15",
"05:30",
"05:45",
"06:00",
"06:15",
"06:30",
"06:45",
"07:00",
"07:15",
"07:30",
"07:45",
"08:00",
"08:15",
"08:30",
"08:45",
"09:00",
"09:15",
"09:30",
"09:45",
"10:00",
"10:15",
"10:30",
"10:45",
"11:00",
"11:15",
"11:30",
"11:45",
"12:00",
"12:15",
"12:30",
"12:45",
"13:00",
"13:15",
"13:30",
"13:45",
"14:00",
"14:15",
"14:30",
"14:45",
"15:00",
"15:15",
"15:30",
"15:45",
"16:00",
"16:15",
"16:30",
"16:45",
"17:00",
"17:15",
"17:30",
"17:45",
"18:00",
"18:15",
"18:30",
"18:45",
"19:00",
"19:15",
"19:30",
"19:45",
"20:00",
"20:15",
"20:30",
"20:45",
"21:00",
"21:15",
"21:30",
"21:45",
"22:00",
"22:15",
"22:30",
"22:45",
"23:00",
"23:15",
"23:30",
"23:45"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.6,
"center": {
"label": "Visits"
},
"link": {
"mode": "map",
"map": {
"Night": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23
],
"Morning": [
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39,
40,
41,
42,
43,
44,
45,
46,
47
],
"Afternoon": [
48,
49,
50,
51,
52,
53,
54,
55,
56,
57,
58,
59,
60,
61,
62,
63,
64,
65,
66,
67,
68,
69,
70,
71
],
"Evening": [
72,
73,
74,
75,
76,
77,
78,
79,
80,
81,
82,
83,
84,
85,
86,
87,
88,
89,
90,
91,
92,
93,
94,
95
]
},
"align": true,
"unit": "quarter hours"
},
"layers": [
{
"type": "donut",
"name": "Day part",
"labels": [
"Night",
"Morning",
"Afternoon",
"Evening"
],
"data": [
690,
955,
905,
685
]
}
]
}
}
}
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": "Visits",
"data": [
17,
15,
12,
13,
15,
18,
20,
23,
24,
27,
29,
32,
36,
35,
38,
39,
38,
40,
40,
39,
37,
35,
35,
33,
32,
32,
31,
28,
25,
22,
22,
16,
17,
19,
23,
29,
29,
34,
42,
45,
45,
48,
60,
61,
66,
74,
75,
80,
76,
79,
76,
76,
67,
65,
60,
54,
46,
36,
32,
31,
28,
25,
20,
18,
14,
12,
13,
15,
13,
14,
16,
19,
23,
25,
28,
29,
31,
35,
38,
40,
41,
42,
40,
38,
34,
32,
28,
28,
27,
23,
22,
21,
18,
14,
15,
13
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:15",
"00:30",
"00:45",
"01:00",
"01:15",
"01:30",
"01:45",
"02:00",
"02:15",
"02:30",
"02:45",
"03:00",
"03:15",
"03:30",
"03:45",
"04:00",
"04:15",
"04:30",
"04:45",
"05:00",
"05:15",
"05:30",
"05:45",
"06:00",
"06:15",
"06:30",
"06:45",
"07:00",
"07:15",
"07:30",
"07:45",
"08:00",
"08:15",
"08:30",
"08:45",
"09:00",
"09:15",
"09:30",
"09:45",
"10:00",
"10:15",
"10:30",
"10:45",
"11:00",
"11:15",
"11:30",
"11:45",
"12:00",
"12:15",
"12:30",
"12:45",
"13:00",
"13:15",
"13:30",
"13:45",
"14:00",
"14:15",
"14:30",
"14:45",
"15:00",
"15:15",
"15:30",
"15:45",
"16:00",
"16:15",
"16:30",
"16:45",
"17:00",
"17:15",
"17:30",
"17:45",
"18:00",
"18:15",
"18:30",
"18:45",
"19:00",
"19:15",
"19:30",
"19:45",
"20:00",
"20:15",
"20:30",
"20:45",
"21:00",
"21:15",
"21:30",
"21:45",
"22:00",
"22:15",
"22:30",
"22:45",
"23:00",
"23:15",
"23:30",
"23:45"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.6,
"center": {
"label": "Visits"
},
"link": {
"mode": "map",
"map": {
"Night": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23
],
"Morning": [
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36,
37,
38,
39,
40,
41,
42,
43,
44,
45,
46,
47
],
"Afternoon": [
48,
49,
50,
51,
52,
53,
54,
55,
56,
57,
58,
59,
60,
61,
62,
63,
64,
65,
66,
67,
68,
69,
70,
71
],
"Evening": [
72,
73,
74,
75,
76,
77,
78,
79,
80,
81,
82,
83,
84,
85,
86,
87,
88,
89,
90,
91,
92,
93,
94,
95
]
},
"align": true,
"unit": "quarter hours"
},
"layers": [
{
"type": "donut",
"name": "Day part",
"labels": [
"Night",
"Morning",
"Afternoon",
"Evening"
],
"data": [
690,
955,
905,
685
]
}
]
}
}
}
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-multi-dayparts.json --out radial-column-multi-dayparts.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/multi-dayparts/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?