# Chord inside: freight lanes between six regions (Radial Column example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/chord-trade/ · Index for agents: https://westcoast-charts.com/llms.txt 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. - Chart type: `radialColumn` (Radial Column) - Collection: Radial Column · Radial Column · Chord inside - Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/chord-trade.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=chord-trade ## Setup ```js 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 ``` ## Options ```js 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() ``` ## Verify - Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page. - Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export radial-column-chord-trade.json --out radial-column-chord-trade.svg --with-table` (save the options above as JSON first)