Wave ring: the seasonal cycle of a typical day
How does a typical day of energy supply change across the year?
Wave ring
How to read this example
- Month sectors
- Each sector contains a typical 24-hour supply profile.
- Stacked waves
- Solar, wind and grid power in GW within that typical day.
- Outside & centre
- Monthly energy totals in TWh outside; annual energy mix inside.
Try thisCompare a summer and winter sector. Keep the units separate: the waves show power in GW; the surrounding totals show energy in TWh.
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": 640,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Supply (TWh / month)",
"data": [
38.1,
36.8,
34.1,
31.5,
29.9,
29.4,
29.6,
28.9,
30.2,
32.8,
36.1,
38.7
]
}
],
"xaxis": {
"categories": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"plotOptions": {
"radialColumn": {
"startAngle": -150,
"endAngle": 150,
"innerRadius": 0.8,
"hole": "34%",
"center": {
"label": "TWh (year)"
},
"fill": {
"type": "value",
"stops": [
"#0e7490",
"#22d3ee"
]
},
"link": {
"mode": "category",
"unit": "months"
},
"layers": [
{
"type": "donut",
"name": "Annual mix (TWh)",
"data": [
{
"x": "Solar",
"y": 57,
"keys": [
"Solar"
]
},
{
"x": "Wind",
"y": 93,
"keys": [
"Wind"
]
},
{
"x": "Grid",
"y": 246,
"keys": [
"Grid"
]
}
],
"colors": [
"#fbbf24",
"#38bdf8",
"#a78bfa"
],
"thickness": "15%",
"padding": 2,
"link": false,
"legend": false
},
{
"type": "wave",
"name": "Typical day (GW)",
"mode": "stack",
"sectors": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"gap": 8,
"colors": [
"#fbbf24",
"#38bdf8",
"#a78bfa"
],
"legendTitle": "Supply",
"labels": [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00"
],
"data": [
{
"name": "Solar",
"data": [
0,
0,
0,
0,
0,
0,
0,
0,
0.1,
1.2,
2.7,
4.5,
5.9,
6.5,
5.9,
4.5,
2.7,
1.2,
0.1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.1,
1.2,
3,
5.4,
7.9,
9.8,
10.6,
9.8,
7.9,
5.4,
3,
1.2,
0.1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.4,
1.8,
4,
7,
10.6,
14.1,
16.7,
17.7,
16.7,
14.1,
10.6,
7,
4,
1.8,
0.4,
0,
0,
0,
0,
0,
0,
0,
0,
0.8,
2.4,
4.8,
8.3,
12.5,
17.2,
21.4,
24.4,
25.5,
24.4,
21.4,
17.2,
12.5,
8.3,
4.8,
2.4,
0.8,
0,
0,
0,
0,
0,
0,
0.7,
2.2,
4.5,
7.8,
12.1,
17.1,
22.3,
27,
30.2,
31.3,
30.2,
27,
22.3,
17.1,
12.1,
7.8,
4.5,
2.2,
0.7,
0,
0,
0,
0,
0.1,
1.1,
2.7,
5.2,
8.8,
13.3,
18.5,
23.9,
28.6,
31.8,
33,
31.8,
28.6,
23.9,
18.5,
13.3,
8.8,
5.2,
2.7,
1.1,
0.1,
0,
0,
0,
0,
0.9,
2.5,
4.9,
8.4,
12.8,
18,
23.3,
27.9,
31.2,
32.3,
31.2,
27.9,
23.3,
18,
12.8,
8.4,
4.9,
2.5,
0.9,
0,
0,
0,
0,
0,
0.2,
1.4,
3.3,
6.2,
10,
14.6,
19.6,
24,
27.1,
28.2,
27.1,
24,
19.6,
14.6,
10,
6.2,
3.3,
1.4,
0.2,
0,
0,
0,
0,
0,
0,
0.1,
1.2,
3.1,
5.9,
9.6,
13.7,
17.6,
20.4,
21.4,
20.4,
17.6,
13.7,
9.6,
5.9,
3.1,
1.2,
0.1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.8,
2.4,
4.8,
7.8,
10.8,
13.1,
14,
13.1,
10.8,
7.8,
4.8,
2.4,
0.8,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.4,
1.7,
3.6,
5.6,
7.2,
7.8,
7.2,
5.6,
3.6,
1.7,
0.4,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.7,
2,
3.4,
4.6,
5.1,
4.6,
3.4,
2,
0.7,
0,
0,
0,
0,
0,
0
],
"keys": [
"Solar"
]
},
{
"name": "Wind",
"data": [
13.5,
15.4,
17.3,
18.1,
19.5,
20.8,
19.3,
19.6,
17.9,
14.9,
12.8,
11.3,
9.2,
8,
8,
7.3,
8.1,
9.1,
12,
14,
14.2,
15.9,
18.6,
18.6,
16.8,
17.2,
17.9,
19.6,
18.8,
17.1,
17.3,
14.6,
12.4,
10.1,
8.9,
7.7,
6.9,
8.4,
7.3,
9.6,
11.1,
12.3,
13.8,
16,
17.4,
17.6,
18.9,
19.4,
16.4,
17.4,
17.3,
15.9,
14.4,
13.4,
12.4,
10.2,
7.9,
6.8,
6.1,
6.6,
6.5,
8.9,
9.4,
11.5,
13.9,
13.5,
16.5,
15.8,
17.8,
17.1,
16,
15.2,
14.1,
13.7,
13,
11.9,
8.9,
8.4,
7.9,
6.3,
5.2,
5.3,
6,
7.6,
7.3,
10.1,
10.3,
12.7,
13.5,
14.6,
13.3,
14.4,
13.5,
12.5,
11.8,
10.1,
9.2,
9.6,
7.9,
6.9,
6.9,
4.4,
5.3,
4.2,
6.1,
5.3,
6.3,
7.5,
8.3,
10.5,
11.4,
10.9,
11.5,
12,
11.8,
10.5,
10.1,
8.1,
7.3,
5.6,
7.1,
6,
4.8,
3.6,
4.4,
4.5,
4.4,
4.5,
5.9,
7.4,
7.7,
7.6,
9.5,
9.5,
9.5,
8.6,
9.1,
9.2,
8.4,
7.5,
5.6,
4.5,
5.2,
3.7,
4.3,
4,
3.7,
4.9,
4,
4.4,
4.9,
6.8,
6.7,
8.3,
7.3,
8.6,
8.7,
9.1,
9.6,
8.7,
7.2,
6.6,
6.7,
5.5,
5,
4,
3.4,
4.3,
5.1,
4.2,
4.5,
5.1,
6.6,
7.7,
8.3,
8.1,
10.2,
9.9,
9.3,
10.7,
9.1,
9.6,
8,
8,
7.5,
4.8,
4.1,
5.4,
4.4,
4.3,
5.9,
5.3,
4.9,
6.7,
6.5,
9,
9.6,
11.2,
11.4,
13,
12.1,
12,
11.1,
11.7,
9.2,
9.1,
7.1,
7.4,
5.4,
4.8,
5,
5.6,
6.2,
6,
7.3,
9.4,
8.6,
9.7,
12.6,
12.4,
13.6,
14.8,
15,
15.9,
15.9,
14.9,
12.4,
11.3,
10.4,
9,
7.5,
6.4,
6.1,
5.7,
7.5,
8.6,
9.5,
11.8,
12.8,
// Full configuration available through Raw or Copy.
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
import waveRing from 'west-coast-charts/layers/wave-ring'
WestCoastCharts.use(premium).use(waveRing)
const WestCoastChartsPremium = premium
const WestCoastChartsLayer_waveRing = waveRing
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 640,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Supply (TWh / month)",
"data": [
38.1,
36.8,
34.1,
31.5,
29.9,
29.4,
29.6,
28.9,
30.2,
32.8,
36.1,
38.7
]
}
],
"xaxis": {
"categories": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
"plotOptions": {
"radialColumn": {
"startAngle": -150,
"endAngle": 150,
"innerRadius": 0.8,
"hole": "34%",
"center": {
"label": "TWh (year)"
},
"fill": {
"type": "value",
"stops": [
"#0e7490",
"#22d3ee"
]
},
"link": {
"mode": "category",
"unit": "months"
},
"layers": [
{
"type": "donut",
"name": "Annual mix (TWh)",
"data": [
{
"x": "Solar",
"y": 57,
"keys": [
"Solar"
]
},
{
"x": "Wind",
"y": 93,
"keys": [
"Wind"
]
},
{
"x": "Grid",
"y": 246,
"keys": [
"Grid"
]
}
],
"colors": [
"#fbbf24",
"#38bdf8",
"#a78bfa"
],
"thickness": "15%",
"padding": 2,
"link": false,
"legend": false
},
{
"type": "wave",
"name": "Typical day (GW)",
"mode": "stack",
"sectors": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"gap": 8,
"colors": [
"#fbbf24",
"#38bdf8",
"#a78bfa"
],
"legendTitle": "Supply",
"labels": [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00"
],
"data": [
{
"name": "Solar",
"data": [
0,
0,
0,
0,
0,
0,
0,
0,
0.1,
1.2,
2.7,
4.5,
5.9,
6.5,
5.9,
4.5,
2.7,
1.2,
0.1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.1,
1.2,
3,
5.4,
7.9,
9.8,
10.6,
9.8,
7.9,
5.4,
3,
1.2,
0.1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.4,
1.8,
4,
7,
10.6,
14.1,
16.7,
17.7,
16.7,
14.1,
10.6,
7,
4,
1.8,
0.4,
0,
0,
0,
0,
0,
0,
0,
0,
0.8,
2.4,
4.8,
8.3,
12.5,
17.2,
21.4,
24.4,
25.5,
24.4,
21.4,
17.2,
12.5,
8.3,
4.8,
2.4,
0.8,
0,
0,
0,
0,
0,
0,
0.7,
2.2,
4.5,
7.8,
12.1,
17.1,
22.3,
27,
30.2,
31.3,
30.2,
27,
22.3,
17.1,
12.1,
7.8,
4.5,
2.2,
0.7,
0,
0,
0,
0,
0.1,
1.1,
2.7,
5.2,
8.8,
13.3,
18.5,
23.9,
28.6,
31.8,
33,
31.8,
28.6,
23.9,
18.5,
13.3,
8.8,
5.2,
2.7,
1.1,
0.1,
0,
0,
0,
0,
0.9,
2.5,
4.9,
8.4,
12.8,
18,
23.3,
27.9,
31.2,
32.3,
31.2,
27.9,
23.3,
18,
12.8,
8.4,
4.9,
2.5,
0.9,
0,
0,
0,
0,
0,
0.2,
1.4,
3.3,
6.2,
10,
14.6,
19.6,
24,
27.1,
28.2,
27.1,
24,
19.6,
14.6,
10,
6.2,
3.3,
1.4,
0.2,
0,
0,
0,
0,
0,
0,
0.1,
1.2,
3.1,
5.9,
9.6,
13.7,
17.6,
20.4,
21.4,
20.4,
17.6,
13.7,
9.6,
5.9,
3.1,
1.2,
0.1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.8,
2.4,
4.8,
7.8,
10.8,
13.1,
14,
13.1,
10.8,
7.8,
4.8,
2.4,
0.8,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.4,
1.7,
3.6,
5.6,
7.2,
7.8,
7.2,
5.6,
3.6,
1.7,
0.4,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.7,
2,
3.4,
4.6,
5.1,
4.6,
3.4,
2,
0.7,
0,
0,
0,
0,
0,
0
],
"keys": [
"Solar"
]
},
{
"name": "Wind",
"data": [
13.5,
15.4,
17.3,
18.1,
19.5,
20.8,
19.3,
19.6,
17.9,
14.9,
12.8,
11.3,
9.2,
8,
8,
7.3,
8.1,
9.1,
12,
14,
14.2,
15.9,
18.6,
18.6,
16.8,
17.2,
17.9,
19.6,
18.8,
17.1,
17.3,
14.6,
12.4,
10.1,
8.9,
7.7,
6.9,
8.4,
7.3,
9.6,
11.1,
12.3,
13.8,
16,
17.4,
17.6,
18.9,
19.4,
16.4,
17.4,
17.3,
15.9,
14.4,
13.4,
12.4,
10.2,
7.9,
6.8,
6.1,
6.6,
6.5,
8.9,
9.4,
11.5,
13.9,
13.5,
16.5,
15.8,
17.8,
17.1,
16,
15.2,
14.1,
13.7,
13,
11.9,
8.9,
8.4,
7.9,
6.3,
5.2,
5.3,
6,
7.6,
7.3,
10.1,
10.3,
12.7,
13.5,
14.6,
13.3,
14.4,
13.5,
12.5,
11.8,
10.1,
9.2,
9.6,
7.9,
6.9,
6.9,
4.4,
5.3,
4.2,
6.1,
5.3,
6.3,
7.5,
8.3,
10.5,
11.4,
10.9,
11.5,
12,
11.8,
10.5,
10.1,
8.1,
7.3,
5.6,
7.1,
6,
4.8,
3.6,
4.4,
4.5,
4.4,
4.5,
5.9,
7.4,
7.7,
7.6,
9.5,
9.5,
9.5,
8.6,
9.1,
9.2,
8.4,
7.5,
5.6,
4.5,
5.2,
3.7,
4.3,
4,
3.7,
4.9,
4,
4.4,
4.9,
6.8,
6.7,
8.3,
7.3,
8.6,
8.7,
9.1,
9.6,
8.7,
7.2,
6.6,
6.7,
5.5,
5,
4,
3.4,
4.3,
5.1,
4.2,
4.5,
5.1,
6.6,
7.7,
8.3,
8.1,
10.2,
9.9,
9.3,
10.7,
9.1,
9.6,
8,
8,
7.5,
4.8,
4.1,
5.4,
4.4,
4.3,
5.9,
5.3,
4.9,
6.7,
6.5,
9,
9.6,
11.2,
11.4,
13,
12.1,
12,
11.1,
11.7,
9.2,
9.1,
7.1,
7.4,
5.4,
4.8,
5,
5.6,
6.2,
6,
7.3,
9.4,
8.6,
9.7,
12.6,
12.4,
13.6,
14.8,
15,
15.9,
15.9,
14.9,
12.4,
11.3,
10.4,
9,
7.5,
6.4,
6.1,
5.7,
7.5,
8.6,
9.5,
11.8,
12.8,
13.1,
14,
16,
17.1,
17.5,
17.5,
17.7,
16.8,
17,
14.2,
13.4,
11.1,
9.2,
7.9,
8.7,
7.3,
6.8,
8.9,
8.8,
11.8,
12.8,
14.1,
17.1,
18.1,
18.1,
18.3,
19.5,
19.2,
20.8,
19.2,
17,
16.1,
13.8,
11.5,
11.6,
8.9,
9.2,
7.2,
8.8,
8.3,
9.5,
12.1,
13.3,
16.2,
16.9,
19.1,
19,
20.6,
19.9
],
"keys": [
"Wind"
]
},
{
"name": "Grid",
"data": [
31.7,
25.6,
20.2,
17.5,
17,
19.6,
27.1,
33.1,
39.3,
42.7,
42,
39.1,
37.6,
37.4,
38.9,
43.6,
48.1,
52.2,
52.6,
50.6,
48.1,
42.5,
35.5,
31,
26.9,
22.4,
18.3,
14.8,
16.5,
21.9,
27.4,
36.2,
41.7,
43.7,
41.3,
37.5,
34.1,
31.2,
33.9,
36.1,
40.5,
45.1,
47.5,
46.4,
42.8,
38.9,
33.3,
28.5,
24.1,
19.4,
16.3,
16.1,
18.3,
22.8,
28.8,
35.3,
39.4,
38.9,
34.9,
28.4,
23.9,
19.9,
21.2,
24,
28.4,
35.5,
37.4,
40.3,
37.6,
35.3,
32.4,
29.3,
23.3,
20.2,
18,
17.6,
21.3,
24.3,
28.1,
32.4,
34,
30.9,
24.4,
16.4,
11.9,
7.3,
9.1,
11.7,
18.2,
24.5,
31.9,
34.2,
35.7,
35.1,
33,
30.9,
25.9,
22.2,
21.2,
20.8,
20.7,
24.7,
26.1,
28.9,
26.2,
23.2,
16,
8.2,
4,
4,
4,
5.1,
11.9,
19.3,
26.3,
31.8,
33.8,
35,
33.9,
32.9,
27.2,
25.1,
23.7,
23.4,
22.2,
23.4,
25.6,
26.7,
24.2,
18.6,
12,
5.5,
4,
4,
4,
4.9,
11.7,
19.6,
27.3,
32.7,
36.4,
37.1,
34.7,
33.8,
30.4,
27.4,
25,
22.4,
23.1,
24.1,
25.8,
25.3,
24.4,
18.8,
13.5,
5.5,
4,
4,
4,
5.9,
14.7,
23.4,
30.1,
35.7,
37.9,
38.3,
37.1,
33.7,
29.2,
26.9,
23.9,
22,
20.9,
21.6,
23.6,
25.7,
23.2,
20,
14.7,
6.9,
4,
4,
5,
10,
17.7,
27.9,
34.9,
37.5,
39.5,
38.7,
34.9,
32.3,
31,
25.9,
23.2,
19.3,
19.3,
20.7,
24.1,
25.7,
27.4,
25.1,
20.9,
14.3,
12.1,
10.6,
14.4,
19,
27.7,
35.2,
40.4,
42.5,
42,
40.3,
35.5,
29.9,
30.4,
25.7,
19.7,
18.4,
17.9,
20,
25,
28.8,
31.1,
31,
29.4,
25.2,
21.9,
21.8,
25,
30.5,
37,
43.4,
45.8,
46.3,
44.2,
38.6,
33.8,
29.6,
28.9,
23,
18.5,
16.3,
17.1,
20.6,
27.2,
32.9,
39.7,
40.6,
39.9,
37.3,
34.8,
32.7,
35.6,
40.1,
43.5,
48.7,
49.1,
48.5,
45,
38.3,
33.2,
28.9,
27.7,
22.3,
18.9,
15.5,
18,
24,
31.1,
39.8,
46.8,
47.6,
47.6,
43.2,
41.8,
38.9,
40.9,
43.4,
45.9,
49.6,
49.6,
48.9,
44.3,
40.5,
34.4,
30.6
],
"keys": [
"Grid"
]
}
]
}
]
}
}
}
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-wave-energy.json --out radial-column-wave-energy.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/wave-energy/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?