Spectrum ring
120 thin bars around a full ring, coloured cyan to orange by angle; the centre shows the total.
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": 480,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Requests",
"data": [
57,
56,
58,
57,
57,
54,
50,
44,
43,
38,
35,
35,
36,
35,
37,
38,
39,
44,
43,
49,
54,
54,
59,
65,
69,
74,
76,
79,
82,
87,
89,
87,
90,
90,
86,
84,
79,
79,
79,
74,
74,
68,
66,
62,
57,
52,
46,
44,
42,
39,
35,
34,
36,
37,
35,
39,
38,
38,
42,
49,
53,
55,
55,
55,
60,
63,
67,
72,
75,
75,
79,
81,
85,
82,
81,
79,
79,
76,
75,
73,
73,
73,
66,
62,
61,
52,
51,
49,
44,
43,
39,
39,
38,
39,
39,
41,
38,
38,
45,
50,
51,
53,
55,
62,
66,
67,
72,
73,
76,
79,
78,
82,
85,
87,
85,
87,
85,
79,
79,
79
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:12",
"00:24",
"00:36",
"00:48",
"01:00",
"01:12",
"01:24",
"01:36",
"01:48",
"02:00",
"02:12",
"02:24",
"02:36",
"02:48",
"03:00",
"03:12",
"03:24",
"03:36",
"03:48",
"04:00",
"04:12",
"04:24",
"04:36",
"04:48",
"05:00",
"05:12",
"05:24",
"05:36",
"05:48",
"06:00",
"06:12",
"06:24",
"06:36",
"06:48",
"07:00",
"07:12",
"07:24",
"07:36",
"07:48",
"08:00",
"08:12",
"08:24",
"08:36",
"08:48",
"09:00",
"09:12",
"09:24",
"09:36",
"09:48",
"10:00",
"10:12",
"10:24",
"10:36",
"10:48",
"11:00",
"11:12",
"11:24",
"11:36",
"11:48",
"12:00",
"12:12",
"12:24",
"12:36",
"12:48",
"13:00",
"13:12",
"13:24",
"13:36",
"13:48",
"14:00",
"14:12",
"14:24",
"14:36",
"14:48",
"15:00",
"15:12",
"15:24",
"15:36",
"15:48",
"16:00",
"16:12",
"16:24",
"16:36",
"16:48",
"17:00",
"17:12",
"17:24",
"17:36",
"17:48",
"18:00",
"18:12",
"18:24",
"18:36",
"18:48",
"19:00",
"19:12",
"19:24",
"19:36",
"19:48",
"20:00",
"20:12",
"20:24",
"20:36",
"20:48",
"21:00",
"21:12",
"21:24",
"21:36",
"21:48",
"22:00",
"22:12",
"22:24",
"22:36",
"22:48",
"23:00",
"23:12",
"23:24",
"23:36",
"23:48"
]
},
"plotOptions": {
"radialColumn": {
"center": {
"label": "Requests today"
}
}
}
}
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": 480,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Requests",
"data": [
57,
56,
58,
57,
57,
54,
50,
44,
43,
38,
35,
35,
36,
35,
37,
38,
39,
44,
43,
49,
54,
54,
59,
65,
69,
74,
76,
79,
82,
87,
89,
87,
90,
90,
86,
84,
79,
79,
79,
74,
74,
68,
66,
62,
57,
52,
46,
44,
42,
39,
35,
34,
36,
37,
35,
39,
38,
38,
42,
49,
53,
55,
55,
55,
60,
63,
67,
72,
75,
75,
79,
81,
85,
82,
81,
79,
79,
76,
75,
73,
73,
73,
66,
62,
61,
52,
51,
49,
44,
43,
39,
39,
38,
39,
39,
41,
38,
38,
45,
50,
51,
53,
55,
62,
66,
67,
72,
73,
76,
79,
78,
82,
85,
87,
85,
87,
85,
79,
79,
79
]
}
],
"xaxis": {
"categories": [
"00:00",
"00:12",
"00:24",
"00:36",
"00:48",
"01:00",
"01:12",
"01:24",
"01:36",
"01:48",
"02:00",
"02:12",
"02:24",
"02:36",
"02:48",
"03:00",
"03:12",
"03:24",
"03:36",
"03:48",
"04:00",
"04:12",
"04:24",
"04:36",
"04:48",
"05:00",
"05:12",
"05:24",
"05:36",
"05:48",
"06:00",
"06:12",
"06:24",
"06:36",
"06:48",
"07:00",
"07:12",
"07:24",
"07:36",
"07:48",
"08:00",
"08:12",
"08:24",
"08:36",
"08:48",
"09:00",
"09:12",
"09:24",
"09:36",
"09:48",
"10:00",
"10:12",
"10:24",
"10:36",
"10:48",
"11:00",
"11:12",
"11:24",
"11:36",
"11:48",
"12:00",
"12:12",
"12:24",
"12:36",
"12:48",
"13:00",
"13:12",
"13:24",
"13:36",
"13:48",
"14:00",
"14:12",
"14:24",
"14:36",
"14:48",
"15:00",
"15:12",
"15:24",
"15:36",
"15:48",
"16:00",
"16:12",
"16:24",
"16:36",
"16:48",
"17:00",
"17:12",
"17:24",
"17:36",
"17:48",
"18:00",
"18:12",
"18:24",
"18:36",
"18:48",
"19:00",
"19:12",
"19:24",
"19:36",
"19:48",
"20:00",
"20:12",
"20:24",
"20:36",
"20:48",
"21:00",
"21:12",
"21:24",
"21:36",
"21:48",
"22:00",
"22:12",
"22:24",
"22:36",
"22:48",
"23:00",
"23:12",
"23:24",
"23:36",
"23:48"
]
},
"plotOptions": {
"radialColumn": {
"center": {
"label": "Requests today"
}
}
}
}
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-spectrum.json --out radial-column-spectrum.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/spectrum/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?