Time ring: a week of chats, hour by hour
A heatmap ring (Monday inside, Sunday outside, one cell per hour) sits under the hourly totals: the cells share the columns' angles, so hovering an hour lights that hour on every day and the tooltip lists the seven days. In the middle a polar area of the channel mix (radius = volume, independent of the ring). Compact layout retains the seven separate days × 24 hours and all five channels; no weekday averaging or row omission is applied.
Time rings & goals
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": 580,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Chats",
"data": [
49,
43,
50,
56,
54,
49,
44,
56,
99,
142,
203,
241,
306,
297,
301,
285,
271,
230,
182,
130,
79,
64,
51,
49
]
}
],
"xaxis": {
"categories": [
"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"
]
},
"colors": [
"#818cf8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"center": {
"show": false
},
"link": {
"mode": "angle",
"unit": "hours"
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "34%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
]
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"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"
],
"ringGap": 1,
"color": "#a78bfa"
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.84,
"hole": 0,
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "24%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
],
"gap": 2
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"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"
],
"ringGap": 0.5,
"color": "#a78bfa"
}
]
}
}
}
}
]
}
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": 580,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Chats",
"data": [
49,
43,
50,
56,
54,
49,
44,
56,
99,
142,
203,
241,
306,
297,
301,
285,
271,
230,
182,
130,
79,
64,
51,
49
]
}
],
"xaxis": {
"categories": [
"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"
]
},
"colors": [
"#818cf8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.62,
"center": {
"show": false
},
"link": {
"mode": "angle",
"unit": "hours"
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "34%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
]
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"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"
],
"ringGap": 1,
"color": "#a78bfa"
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.84,
"hole": 0,
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "polarArea",
"name": "Channel",
"labels": [
"Web chat",
"In-app",
"Email",
"Phone",
"Social"
],
"data": [
412,
356,
198,
121,
64
],
"thickness": "24%",
"link": false,
"colors": [
"#22d3ee",
"#818cf8",
"#f472b6",
"#fbbf24",
"#34d399"
],
"gap": 2
},
{
"type": "heatmap",
"name": "Chats per hour",
"data": [
{
"name": "Mon",
"data": [
4,
9,
8,
8,
7,
4,
5,
10,
14,
26,
35,
35,
52,
47,
48,
45,
40,
32,
23,
17,
9,
6,
5,
6
]
},
{
"name": "Tue",
"data": [
9,
7,
6,
8,
8,
6,
8,
7,
15,
24,
36,
43,
52,
49,
49,
43,
41,
31,
26,
17,
9,
10,
7,
5
]
},
{
"name": "Wed",
"data": [
7,
5,
8,
7,
7,
7,
9,
6,
19,
24,
34,
42,
51,
50,
47,
45,
43,
34,
24,
19,
9,
9,
9,
8
]
},
{
"name": "Thu",
"data": [
10,
4,
9,
8,
8,
9,
4,
5,
15,
25,
34,
40,
56,
53,
49,
46,
41,
37,
26,
17,
10,
7,
8,
9
]
},
{
"name": "Fri",
"data": [
6,
6,
4,
5,
9,
10,
5,
10,
18,
26,
36,
45,
55,
50,
51,
51,
45,
37,
31,
15,
6,
6,
4,
4
]
},
{
"name": "Sat",
"data": [
6,
5,
5,
10,
9,
9,
7,
9,
10,
9,
13,
17,
20,
24,
27,
28,
29,
29,
26,
22,
18,
14,
9,
10
]
},
{
"name": "Sun",
"data": [
7,
7,
10,
10,
6,
4,
6,
9,
8,
8,
15,
19,
20,
24,
30,
27,
32,
30,
26,
23,
18,
12,
9,
7
]
}
],
"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"
],
"ringGap": 0.5,
"color": "#a78bfa"
}
]
}
}
}
}
]
}
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-heat-week.json --out radial-column-heat-week.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/heat-week/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?