Chord inside: freight lanes between six regions
Inner chord = container freight between regions (ribbon from exporter to importer); outer ring = each region's monthly exports, 12 bars per region, aligned under its chord arc. Hover a region to light its lanes and its twelve months; hover a lane to light both regions' months; hover a month to see its region and lanes.
Chord inside
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": 600,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Exports (k TEU)",
"data": [
{
"x": "North America · Jan",
"y": 6.5,
"fillColor": "#38bdf8"
},
{
"x": "North America · Feb",
"y": 8.5,
"fillColor": "#38bdf8"
},
{
"x": "North America · Mar",
"y": 8.2,
"fillColor": "#38bdf8"
},
{
"x": "North America · Apr",
"y": 8.8,
"fillColor": "#38bdf8"
},
{
"x": "North America · May",
"y": 10.4,
"fillColor": "#38bdf8"
},
{
"x": "North America · Jun",
"y": 10.2,
"fillColor": "#38bdf8"
},
{
"x": "North America · Jul",
"y": 9.6,
"fillColor": "#38bdf8"
},
{
"x": "North America · Aug",
"y": 9.8,
"fillColor": "#38bdf8"
},
{
"x": "North America · Sep",
"y": 9,
"fillColor": "#38bdf8"
},
{
"x": "North America · Oct",
"y": 7.9,
"fillColor": "#38bdf8"
},
{
"x": "North America · Nov",
"y": 7.5,
"fillColor": "#38bdf8"
},
{
"x": "North America · Dec",
"y": 7.2,
"fillColor": "#38bdf8"
},
{
"x": "Latin America · Jan",
"y": 4.4,
"fillColor": "#34d399"
},
{
"x": "Latin America · Feb",
"y": 4.1,
"fillColor": "#34d399"
},
{
"x": "Latin America · Mar",
"y": 4.5,
"fillColor": "#34d399"
},
{
"x": "Latin America · Apr",
"y": 5.3,
"fillColor": "#34d399"
},
{
"x": "Latin America · May",
"y": 5.8,
"fillColor": "#34d399"
},
{
"x": "Latin America · Jun",
"y": 5.4,
"fillColor": "#34d399"
},
{
"x": "Latin America · Jul",
"y": 6.2,
"fillColor": "#34d399"
},
{
"x": "Latin America · Aug",
"y": 5.8,
"fillColor": "#34d399"
},
{
"x": "Latin America · Sep",
"y": 6,
"fillColor": "#34d399"
},
{
"x": "Latin America · Oct",
"y": 5.4,
"fillColor": "#34d399"
},
{
"x": "Latin America · Nov",
"y": 4.3,
"fillColor": "#34d399"
},
{
"x": "Latin America · Dec",
"y": 4.3,
"fillColor": "#34d399"
},
{
"x": "Europe · Jan",
"y": 7.1,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Feb",
"y": 6.6,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Mar",
"y": 6.7,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Apr",
"y": 7.2,
"fillColor": "#a78bfa"
},
{
"x": "Europe · May",
"y": 8.4,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Jun",
"y": 9.1,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Jul",
"y": 8.7,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Aug",
"y": 8.8,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Sep",
"y": 9.6,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Oct",
"y": 8.2,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Nov",
"y": 7.2,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Dec",
"y": 6.8,
"fillColor": "#a78bfa"
},
{
"x": "Middle East · Jan",
"y": 4.8,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Feb",
"y": 4.3,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Mar",
"y": 4.8,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Apr",
"y": 4.6,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · May",
"y": 5.1,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Jun",
"y": 5.7,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Jul",
"y": 5.3,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Aug",
"y": 5.9,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Sep",
"y": 6.4,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Oct",
"y": 6.2,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Nov",
"y": 5.7,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Dec",
"y": 5,
"fillColor": "#fbbf24"
},
{
"x": "East Asia · Jan",
"y": 14.4,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Feb",
"y": 11.1,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Mar",
"y": 11,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Apr",
"y": 10.6,
"fillColor": "#f472b6"
},
{
"x": "East Asia · May",
"y": 11.6,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Jun",
"y": 13.2,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Jul",
"y": 13.4,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Aug",
"y": 13.6,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Sep",
"y": 15.1,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Oct",
"y": 15.1,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Nov",
"y": 15,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Dec",
"y": 14.3,
"fillColor": "#f472b6"
},
{
"x": "Oceania · Jan",
"y": 3.1,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Feb",
"y": 2.9,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Mar",
"y": 2.7,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Apr",
"y": 2.3,
"fillColor": "#fb923c"
},
{
"x": "Oceania · May",
"y": 2.6,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Jun",
"y": 2.4,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Jul",
"y": 2.8,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Aug",
"y": 3,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Sep",
"y": 3.3,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Oct",
"y": 3.4,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Nov",
"y": 3.4,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Dec",
"y": 3.5,
"fillColor": "#fb923c"
}
]
}
],
"xaxis": {
"categories": [
"North America · Jan",
"North America · Feb",
"North America · Mar",
"North America · Apr",
"North America · May",
"North America · Jun",
"North America · Jul",
"North America · Aug",
"North America · Sep",
"North America · Oct",
"North America · Nov",
"North America · Dec",
"Latin America · Jan",
"Latin America · Feb",
"Latin America · Mar",
"Latin America · Apr",
"Latin America · May",
"Latin America · Jun",
"Latin America · Jul",
"Latin America · Aug",
"Latin America · Sep",
"Latin America · Oct",
"Latin America · Nov",
"Latin America · Dec",
"Europe · Jan",
"Europe · Feb",
"Europe · Mar",
"Europe · Apr",
"Europe · May",
"Europe · Jun",
"Europe · Jul",
"Europe · Aug",
"Europe · Sep",
"Europe · Oct",
"Europe · Nov",
"Europe · Dec",
"Middle East · Jan",
"Middle East · Feb",
"Middle East · Mar",
"Middle East · Apr",
"Middle East · May",
"Middle East · Jun",
"Middle East · Jul",
"Middle East · Aug",
"Middle East · Sep",
"Middle East · Oct",
"Middle East · Nov",
"Middle East · Dec",
"East Asia · Jan",
"East Asia · Feb",
"East Asia · Mar",
"East Asia · Apr",
"East Asia · May",
"East Asia · Jun",
"East Asia · Jul",
"East Asia · Aug",
"East Asia · Sep",
"East Asia · Oct",
"East Asia · Nov",
"East Asia · Dec",
"Oceania · Jan",
"Oceania · Feb",
"Oceania · Mar",
"Oceania · Apr",
"Oceania · May",
"Oceania · Jun",
"Oceania · Jul",
"Oceania · Aug",
"Oceania · Sep",
"Oceania · Oct",
"Oceania · Nov",
"Oceania · Dec"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.7,
"center": {
"label": "k TEU / year"
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 12 === 5 ? c.split(' · ')[0] : '' }
},
"link": {
"mode": "map",
"align": true,
"unit": "months"
},
"layers": [
{
"type": "chord",
"name": "Freight lanes",
"data": [
[
"North America",
"Latin America",
34
],
[
"North America",
"Europe",
41
],
[
"North America",
"East Asia",
22
],
[
"North America",
"Oceania",
6
],
[
"Latin America",
"North America",
29
],
[
"Latin America",
"Europe",
14
],
[
"Latin America",
"East Asia",
18
],
[
"Europe",
"North America",
37
],
[
"Europe",
"Middle East",
19
],
[
"Europe",
"East Asia",
26
],
[
"Europe",
"Latin America",
11
],
[
"Middle East",
"Europe",
24
],
[
"Middle East",
"East Asia",
31
],
[
"Middle East",
"North America",
9
],
[
"East Asia",
"North America",
58
],
[
"East Asia",
"Europe",
49
],
[
"East Asia",
"Oceania",
21
],
[
"East Asia",
"Middle East",
17
],
[
"East Asia",
"Latin America",
15
],
[
"Oceania",
"East Asia",
27
],
[
"Oceania",
"North America",
8
]
],
"groups": [
{
"id": "North America",
"color": "#38bdf8",
"link": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11
]
},
{
"id": "Latin America",
"color": "#34d399",
"link": [
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23
]
},
{
"id": "Europe",
"color": "#a78bfa",
"link": [
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35
]
},
{
"id": "Middle East",
"color": "#fbbf24",
"link": [
36,
37,
38,
39,
40,
41,
42,
// 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'
WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 600,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Exports (k TEU)",
"data": [
{
"x": "North America · Jan",
"y": 6.5,
"fillColor": "#38bdf8"
},
{
"x": "North America · Feb",
"y": 8.5,
"fillColor": "#38bdf8"
},
{
"x": "North America · Mar",
"y": 8.2,
"fillColor": "#38bdf8"
},
{
"x": "North America · Apr",
"y": 8.8,
"fillColor": "#38bdf8"
},
{
"x": "North America · May",
"y": 10.4,
"fillColor": "#38bdf8"
},
{
"x": "North America · Jun",
"y": 10.2,
"fillColor": "#38bdf8"
},
{
"x": "North America · Jul",
"y": 9.6,
"fillColor": "#38bdf8"
},
{
"x": "North America · Aug",
"y": 9.8,
"fillColor": "#38bdf8"
},
{
"x": "North America · Sep",
"y": 9,
"fillColor": "#38bdf8"
},
{
"x": "North America · Oct",
"y": 7.9,
"fillColor": "#38bdf8"
},
{
"x": "North America · Nov",
"y": 7.5,
"fillColor": "#38bdf8"
},
{
"x": "North America · Dec",
"y": 7.2,
"fillColor": "#38bdf8"
},
{
"x": "Latin America · Jan",
"y": 4.4,
"fillColor": "#34d399"
},
{
"x": "Latin America · Feb",
"y": 4.1,
"fillColor": "#34d399"
},
{
"x": "Latin America · Mar",
"y": 4.5,
"fillColor": "#34d399"
},
{
"x": "Latin America · Apr",
"y": 5.3,
"fillColor": "#34d399"
},
{
"x": "Latin America · May",
"y": 5.8,
"fillColor": "#34d399"
},
{
"x": "Latin America · Jun",
"y": 5.4,
"fillColor": "#34d399"
},
{
"x": "Latin America · Jul",
"y": 6.2,
"fillColor": "#34d399"
},
{
"x": "Latin America · Aug",
"y": 5.8,
"fillColor": "#34d399"
},
{
"x": "Latin America · Sep",
"y": 6,
"fillColor": "#34d399"
},
{
"x": "Latin America · Oct",
"y": 5.4,
"fillColor": "#34d399"
},
{
"x": "Latin America · Nov",
"y": 4.3,
"fillColor": "#34d399"
},
{
"x": "Latin America · Dec",
"y": 4.3,
"fillColor": "#34d399"
},
{
"x": "Europe · Jan",
"y": 7.1,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Feb",
"y": 6.6,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Mar",
"y": 6.7,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Apr",
"y": 7.2,
"fillColor": "#a78bfa"
},
{
"x": "Europe · May",
"y": 8.4,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Jun",
"y": 9.1,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Jul",
"y": 8.7,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Aug",
"y": 8.8,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Sep",
"y": 9.6,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Oct",
"y": 8.2,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Nov",
"y": 7.2,
"fillColor": "#a78bfa"
},
{
"x": "Europe · Dec",
"y": 6.8,
"fillColor": "#a78bfa"
},
{
"x": "Middle East · Jan",
"y": 4.8,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Feb",
"y": 4.3,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Mar",
"y": 4.8,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Apr",
"y": 4.6,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · May",
"y": 5.1,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Jun",
"y": 5.7,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Jul",
"y": 5.3,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Aug",
"y": 5.9,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Sep",
"y": 6.4,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Oct",
"y": 6.2,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Nov",
"y": 5.7,
"fillColor": "#fbbf24"
},
{
"x": "Middle East · Dec",
"y": 5,
"fillColor": "#fbbf24"
},
{
"x": "East Asia · Jan",
"y": 14.4,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Feb",
"y": 11.1,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Mar",
"y": 11,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Apr",
"y": 10.6,
"fillColor": "#f472b6"
},
{
"x": "East Asia · May",
"y": 11.6,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Jun",
"y": 13.2,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Jul",
"y": 13.4,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Aug",
"y": 13.6,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Sep",
"y": 15.1,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Oct",
"y": 15.1,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Nov",
"y": 15,
"fillColor": "#f472b6"
},
{
"x": "East Asia · Dec",
"y": 14.3,
"fillColor": "#f472b6"
},
{
"x": "Oceania · Jan",
"y": 3.1,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Feb",
"y": 2.9,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Mar",
"y": 2.7,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Apr",
"y": 2.3,
"fillColor": "#fb923c"
},
{
"x": "Oceania · May",
"y": 2.6,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Jun",
"y": 2.4,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Jul",
"y": 2.8,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Aug",
"y": 3,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Sep",
"y": 3.3,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Oct",
"y": 3.4,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Nov",
"y": 3.4,
"fillColor": "#fb923c"
},
{
"x": "Oceania · Dec",
"y": 3.5,
"fillColor": "#fb923c"
}
]
}
],
"xaxis": {
"categories": [
"North America · Jan",
"North America · Feb",
"North America · Mar",
"North America · Apr",
"North America · May",
"North America · Jun",
"North America · Jul",
"North America · Aug",
"North America · Sep",
"North America · Oct",
"North America · Nov",
"North America · Dec",
"Latin America · Jan",
"Latin America · Feb",
"Latin America · Mar",
"Latin America · Apr",
"Latin America · May",
"Latin America · Jun",
"Latin America · Jul",
"Latin America · Aug",
"Latin America · Sep",
"Latin America · Oct",
"Latin America · Nov",
"Latin America · Dec",
"Europe · Jan",
"Europe · Feb",
"Europe · Mar",
"Europe · Apr",
"Europe · May",
"Europe · Jun",
"Europe · Jul",
"Europe · Aug",
"Europe · Sep",
"Europe · Oct",
"Europe · Nov",
"Europe · Dec",
"Middle East · Jan",
"Middle East · Feb",
"Middle East · Mar",
"Middle East · Apr",
"Middle East · May",
"Middle East · Jun",
"Middle East · Jul",
"Middle East · Aug",
"Middle East · Sep",
"Middle East · Oct",
"Middle East · Nov",
"Middle East · Dec",
"East Asia · Jan",
"East Asia · Feb",
"East Asia · Mar",
"East Asia · Apr",
"East Asia · May",
"East Asia · Jun",
"East Asia · Jul",
"East Asia · Aug",
"East Asia · Sep",
"East Asia · Oct",
"East Asia · Nov",
"East Asia · Dec",
"Oceania · Jan",
"Oceania · Feb",
"Oceania · Mar",
"Oceania · Apr",
"Oceania · May",
"Oceania · Jun",
"Oceania · Jul",
"Oceania · Aug",
"Oceania · Sep",
"Oceania · Oct",
"Oceania · Nov",
"Oceania · Dec"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.7,
"center": {
"label": "k TEU / year"
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 12 === 5 ? c.split(' · ')[0] : '' }
},
"link": {
"mode": "map",
"align": true,
"unit": "months"
},
"layers": [
{
"type": "chord",
"name": "Freight lanes",
"data": [
[
"North America",
"Latin America",
34
],
[
"North America",
"Europe",
41
],
[
"North America",
"East Asia",
22
],
[
"North America",
"Oceania",
6
],
[
"Latin America",
"North America",
29
],
[
"Latin America",
"Europe",
14
],
[
"Latin America",
"East Asia",
18
],
[
"Europe",
"North America",
37
],
[
"Europe",
"Middle East",
19
],
[
"Europe",
"East Asia",
26
],
[
"Europe",
"Latin America",
11
],
[
"Middle East",
"Europe",
24
],
[
"Middle East",
"East Asia",
31
],
[
"Middle East",
"North America",
9
],
[
"East Asia",
"North America",
58
],
[
"East Asia",
"Europe",
49
],
[
"East Asia",
"Oceania",
21
],
[
"East Asia",
"Middle East",
17
],
[
"East Asia",
"Latin America",
15
],
[
"Oceania",
"East Asia",
27
],
[
"Oceania",
"North America",
8
]
],
"groups": [
{
"id": "North America",
"color": "#38bdf8",
"link": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11
]
},
{
"id": "Latin America",
"color": "#34d399",
"link": [
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23
]
},
{
"id": "Europe",
"color": "#a78bfa",
"link": [
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35
]
},
{
"id": "Middle East",
"color": "#fbbf24",
"link": [
36,
37,
38,
39,
40,
41,
42,
43,
44,
45,
46,
47
]
},
{
"id": "East Asia",
"color": "#f472b6",
"link": [
48,
49,
50,
51,
52,
53,
54,
55,
56,
57,
58,
59
]
},
{
"id": "Oceania",
"color": "#fb923c",
"link": [
60,
61,
62,
63,
64,
65,
66,
67,
68,
69,
70,
71
]
}
],
"ringWidth": 12,
"padding": 3,
"ribbon": {
"opacity": 0.62
}
}
]
}
}
}
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-chord-trade.json --out radial-column-chord-trade.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/chord-trade/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?