Region › Country with products (explicit map)
A Region › Country sunburst inside, 16 products outside. An explicit map says which products each country sells: hover a country (or a region) to see them, click to cross-filter the ring to that country's revenue.
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": 540,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Revenue",
"data": [
334,
367,
379,
292,
327,
293,
332,
311,
383,
327,
282,
395,
174,
431,
355,
268
]
}
],
"xaxis": {
"categories": [
"Atlas",
"Bolt",
"Cirrus",
"Delta",
"Ember",
"Flux",
"Glide",
"Halo",
"Ion",
"Jade",
"Kite",
"Lumen",
"Mesa",
"Nova",
"Orbit",
"Pike"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.56,
"link": {
"mode": "map",
"interaction": "both",
"unit": "products",
"map": function (s) { return s.depth === 1 ? sells[s.name] : null }
},
"layers": [
{
"type": "sunburst",
"name": "Markets",
"data": [
{
"x": "EMEA",
"children": [
{
"x": "Germany",
"y": 523,
"values": [
72,
44,
0,
78,
0,
29,
0,
80,
27,
0,
78,
0,
42,
0,
73,
0
]
},
{
"x": "France",
"y": 531,
"values": [
55,
0,
64,
66,
0,
52,
0,
75,
0,
38,
0,
79,
22,
0,
80,
0
]
},
{
"x": "UK",
"y": 537,
"values": [
33,
0,
76,
0,
47,
0,
69,
60,
0,
59,
0,
70,
0,
46,
77,
0
]
},
{
"x": "Nordics",
"y": 510,
"values": [
0,
31,
80,
0,
24,
0,
79,
0,
39,
74,
0,
53,
0,
65,
0,
65
]
}
]
},
{
"x": "Americas",
"children": [
{
"x": "USA",
"y": 505,
"values": [
54,
0,
74,
0,
40,
79,
0,
25,
0,
80,
0,
31,
0,
77,
45,
0
]
},
{
"x": "Canada",
"y": 519,
"values": [
71,
0,
58,
0,
61,
0,
69,
0,
48,
76,
0,
34,
0,
80,
0,
22
]
},
{
"x": "Brazil",
"y": 542,
"values": [
0,
79,
0,
37,
75,
0,
51,
0,
67,
0,
63,
56,
0,
72,
0,
42
]
}
]
},
{
"x": "APAC",
"children": [
{
"x": "Japan",
"y": 525,
"values": [
0,
78,
27,
0,
80,
0,
28,
0,
78,
0,
43,
72,
0,
56,
0,
63
]
},
{
"x": "Australia",
"y": 519,
"values": [
0,
67,
0,
50,
0,
75,
36,
0,
79,
0,
21,
0,
80,
35,
0,
76
]
},
{
"x": "India",
"y": 539,
"values": [
49,
68,
0,
61,
0,
58,
0,
71,
45,
0,
77,
0,
30,
0,
80,
0
]
}
]
}
]
}
]
}
}
}
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": 540,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Revenue",
"data": [
334,
367,
379,
292,
327,
293,
332,
311,
383,
327,
282,
395,
174,
431,
355,
268
]
}
],
"xaxis": {
"categories": [
"Atlas",
"Bolt",
"Cirrus",
"Delta",
"Ember",
"Flux",
"Glide",
"Halo",
"Ion",
"Jade",
"Kite",
"Lumen",
"Mesa",
"Nova",
"Orbit",
"Pike"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.56,
"link": {
"mode": "map",
"interaction": "both",
"unit": "products",
"map": function (s) { return s.depth === 1 ? sells[s.name] : null }
},
"layers": [
{
"type": "sunburst",
"name": "Markets",
"data": [
{
"x": "EMEA",
"children": [
{
"x": "Germany",
"y": 523,
"values": [
72,
44,
0,
78,
0,
29,
0,
80,
27,
0,
78,
0,
42,
0,
73,
0
]
},
{
"x": "France",
"y": 531,
"values": [
55,
0,
64,
66,
0,
52,
0,
75,
0,
38,
0,
79,
22,
0,
80,
0
]
},
{
"x": "UK",
"y": 537,
"values": [
33,
0,
76,
0,
47,
0,
69,
60,
0,
59,
0,
70,
0,
46,
77,
0
]
},
{
"x": "Nordics",
"y": 510,
"values": [
0,
31,
80,
0,
24,
0,
79,
0,
39,
74,
0,
53,
0,
65,
0,
65
]
}
]
},
{
"x": "Americas",
"children": [
{
"x": "USA",
"y": 505,
"values": [
54,
0,
74,
0,
40,
79,
0,
25,
0,
80,
0,
31,
0,
77,
45,
0
]
},
{
"x": "Canada",
"y": 519,
"values": [
71,
0,
58,
0,
61,
0,
69,
0,
48,
76,
0,
34,
0,
80,
0,
22
]
},
{
"x": "Brazil",
"y": 542,
"values": [
0,
79,
0,
37,
75,
0,
51,
0,
67,
0,
63,
56,
0,
72,
0,
42
]
}
]
},
{
"x": "APAC",
"children": [
{
"x": "Japan",
"y": 525,
"values": [
0,
78,
27,
0,
80,
0,
28,
0,
78,
0,
43,
72,
0,
56,
0,
63
]
},
{
"x": "Australia",
"y": 519,
"values": [
0,
67,
0,
50,
0,
75,
36,
0,
79,
0,
21,
0,
80,
35,
0,
76
]
},
{
"x": "India",
"y": 539,
"values": [
49,
68,
0,
61,
0,
58,
0,
71,
45,
0,
77,
0,
30,
0,
80,
0
]
}
]
}
]
}
]
}
}
}
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-drill.json --out radial-column-multi-drill.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-drill/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?