# Triple semantics: a retail year (Radial Column example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/triple-retail/ · Index for agents: https://westcoast-charts.com/llms.txt How to read: 365 daily revenue bars (length) · colour = margin, diverging around the 30 % target (blue below, orange above) · outer band = year over year · inside = Quarter › Month, aligned to its days. Hover a month to light its days. - Chart type: `radialColumn` (Radial Column) - Collection: Radial Column · Radial Column · Triple semantics - Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/triple-retail.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=triple-retail ## 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 Shortened: the full configuration (66 kB, mostly data) is at https://westcoast-charts.com/gallery-src/radial-column/triple-retail.js. ```js const options = { "chart": { "type": "radialColumn", "height": 560, "toolbar": { "show": false } }, "series": [ { "name": "Revenue", "data": [ { "x": "Jan 1", "y": 7900, "meta": { "margin": 31, "yoy": 12 } }, { "x": "Jan 2", "y": 8400, "meta": { "margin": 34.2, "yoy": 13 } }, { "x": "Jan 3", "y": 8600, "meta": { "margin": 33.2, "yoy": 14 } }, { "x": "Jan 4", "y": 8600, "meta": { "margin": 29.8, "yoy": 15 } }, { "x": "Jan 5", "y": 8700, "meta": { "margin": 29.6, "yoy": 16 } }, { "x": "Jan 6", "y": 8700, "meta": { "margin": 33.2, "yoy": 16 } }, { "x": "Jan 7", "y": 9100, "meta": { "margin": 35.8, "yoy": 17 } }, { "x": "Jan 8", "y": 9400, "meta": { "margin": 34.1, "yoy": 18 } }, { "x": "Jan 9", "y": 9100, "meta": { "margin": 30.9, "yoy": 18 } }, { "x": "Jan 10", "y": 8800, "meta": { "margin": 31.4, "yoy": 18 } }, { "x": "Jan 11", "y": 8800, "meta": { "margin": 35.2, "yoy": 18 } }, { "x": "Jan 12", "y": 8500, "meta": { "margin": 37.2, "yoy": 18 } }, { "x": "Jan 13", "y": 8700, "meta": { "margin": 34.8, "yoy": 18 } }, { "x": "Jan 14", "y": 8900, "meta": { "margin": 32, "yoy": 18 } }, { "x": "Jan 15", "y": 9000, "meta": { "margin": 33.2, "yoy": 17 } }, { "x": "Jan 16", "y": 8900, "meta": { "margin": 37.1, "yoy": 17 } }, { "x": "Jan 17", "y": 8800, "meta": { "margin": 38.3, "yoy": 16 } }, { "x": "Jan 18", "y": 8700, "meta": { "margin": 35.4, "yoy": 15 } }, { "x": "Jan 19", "y": 8600, "meta": { "margin": 33, "yoy": 15 } }, { "x": "Jan 20", "y": 8000, "meta": { "margin": 34.9, "yoy": 14 } }, { "x": "Jan 21", "y": 7600, "meta": { "margin": 38.6, "yoy": 13 } }, { "x": "Jan 22", "y": 7400, "meta": { "margin": 39, "yoy": 12 } }, { "x": "Jan 23", "y": 7300, "meta": { "margin": 35.8, "yoy": 11 } }, { "x": "Jan 24", "y": 7200, "meta": { "margin": 33.9, "yoy": 11 } }, { "x": "Jan 25", "y": 7100, "meta": { "margin": 36.4, "yoy": 10 } }, { "x": "Jan 26", "y": 7100, "meta": { "margin": 39.8, "yoy": 10 } }, { "x": "Jan 27", "y": 7000, "meta": { "margin": 39.4, "yoy": 9 } }, { "x": "Jan 28", "y": 6600, "meta": { "margin": 35.9, "yoy": 9 } }, { "x": "Jan 29", "y": 6500, "meta": { "margin": 34.7, "yoy": 9 } }, { "x": "Jan 30", "y": 6600, "meta": { "margin": 37.7, "yoy": 9 } }, { "x": "Jan 31", "y": 6300, "meta": { "margin": 40.6, "yoy": 9 } }, { "x": "Feb 1", "y": 5900, "meta": { "margin": 39.4, "yoy": 9 } }, { "x": "Feb 2", "y": 5800, "meta": { "margin": 35.8, "yoy": 10 } }, { "x": "Feb 3", "y": 5900, "meta": { "margin": 35.3, "yoy": 10 } }, { "x": "Feb 4", "y": 5800, "meta": { "margin": 38.6, "yoy": 11 } }, { "x": "Feb 5", "y": 5500, "meta": { "margin": 41, "yoy": 11 } }, { "x": "Feb 6", "y": 5500, "meta": { "margin": 39, "yoy": 12 } }, { "x": "Feb 7", "y": 5500, "meta": { "margin": 35.5, "yoy": 13 } }, { "x": "Feb 8", "y": 5500, "meta": { "margin": 35.7, "yoy": 13 } }, { "x": "Feb 9", "y": 5300, "meta": { "margin": 39.2, "yoy": 14 } }, { "x": "Feb 10", "y": 5000, "meta": { "margin": 40.9, "yoy": 15 } }, { "x": "Feb 11", "y": 5000, "meta": { "margin": 38.2, "yoy": 15 } }, { "x": "Feb 12", "y": 4700, "meta": { "margin": 35, "yoy": 16 } }, { "x": "Feb 13", "y": 4700, "meta": { "margin": 35.9, "yoy": 16 } }, { "x": "Feb 14", "y": 4500, "meta": { "margin": 39.4, "yoy": 16 } }, { "x": "Feb 15", "y": 4500, "meta": { "margin": 40.3, "yoy": 17 } }, { "x": "Feb 16", "y": 4600, "meta": { "margin": 37, "yoy": 17 } }, { "x": "Feb 17", "y": 4300, "meta": { "margin": 34.3, "yoy": 17 } }, { "x": "Feb 18", "y": 4000, "meta": { "margin": 35.8, "yoy": 16 } }, { "x": "Feb 19", "y": 3600, "meta": { "margin": 39.2, "yoy": 16 } }, { "x": "Feb 20", "y": 3600, "meta": { "margin": 39.2, "yoy": 15 } }, { "x": "Feb 21", "y": 3900, "meta": { "margin": 35.6, "yoy": 15 } }, { "x": "Feb 22", "y": 3800, "meta": { "margin": 33.4, "yoy": 14 } }, { "x": "Feb 23", "y": 3900, "meta": { "margin": 35.6, "yoy": 13 } }, { "x": "Feb 24", "y": 4000, "meta": { "margin": 38.6, "yoy": 12 } }, { "x": "Feb 25", "y": 3900, "meta": { "margin": 37.8, "yoy": 11 } }, { "x": "Feb 26", "y": 4000, "meta": { "margin": 34, "yoy": 10 } }, { "x": "Feb 27", "y": 3600, "meta": { "margin": 32.4, "yoy": 9 } }, { "x": "Feb 28", "y": 3600, "meta": { "margin": 35.1, "yoy": 8 } }, { "x": "Mar 1", "y": 3700, "meta": { "margin": 37.7, "yoy": 7 } }, { "x": "Mar 2", "y": 3600, "meta": { "margin": 36.1, "yoy": 6 } }, { "x": "Mar 3", "y": 3500, "meta": { "margin": 32.2, "yoy": 5 } }, { "x": "Mar 4", "y": 3600, "meta": { "margin": 31.4, "yoy": 4 } }, { "x": "Mar 5", "y": 3400, "meta": { "margin": 34.4, "yoy": 3 } }, { "x": "Mar 6", "y": 3300, "meta": { "margin": 36.5, "yoy": 2 } }, { "x": "Mar 7", "y": 3100, "meta": { "margin": 34.1, "yoy": 2 } }, { "x": "Mar 8", "y": 3300, "meta": { "margin": 30.4, "yoy": 2 } }, { "x": "Mar 9", "y": 3400, "meta": { "margin": 30.3, "yoy": 1 } }, { "x": "Mar 10", "y": 3600, "meta": { "margin": 33.6, "yoy": 1 } }, { "x": "Mar 11", "y": 3400, "meta": { "margin": 34.9, "yoy": 1 } }, { "x": "Mar 12", "y": 3500, "meta": { "margin": 32, "yoy": 1 } }, { "x": "Mar 13", "y": 3600, "meta": { "margin": 28.6, "yoy": 2 } }, { "x": "Mar 14", "y": 3800, "meta": { "margin": 29.3, "yoy": 2 } }, { "x": "Mar 15", "y": 3600, "meta": { "margin": 32.6, "yoy": 2 } }, { "x": "Mar 16", "y": 3800, "meta": { "margin": 33.3, "yoy": 3 } }, { "x": "Mar 17", "y": 3900, "meta": { "margin": 29.8, "yoy": 3 } }, { "x": "Mar 18", "y": 3900, "meta": { "margin": 26.9, "yoy": 4 } }, { "x": "Mar 19", "y": 4000, "meta": { "margin": 28.3, "yoy": 4 } }, { "x": "Mar 20", "y": 3900, "meta": { "margin": 31.6, "yoy": 5 } }, { "x": "Mar 21", "y": 4000, "meta": { "margin": 31.5, "yoy": 5 } }, { "x": "Mar 22", "y": 4200, "meta": { "margin": 27.7, "yoy": 5 } }, { "x": "Mar 23", "y": 4400, "meta": { "margin": 25.4, "yoy": 6 } }, { "x": "Mar 24", "y": 4200, "meta": { "margin": 27.5, "yoy": 6 } }, { "x": "Mar 25", "y": 4400, "meta": { "margin": 30.5, "yoy": 6 } }, { "x": "Mar 26", "y": 4600, "meta": { "margin": 29.6, "yoy": 6 } }, { "x": "Mar 27", "y": 4500, "meta": { "margin": 25.8, "yoy": 5 } }, { "x": "Mar 28", "y": 4600, "meta": { "margin": 24.2, "yoy": 5 } }, { "x": "Mar 29", "y": 4900, "meta": { "margin": 26.8, "yoy": 4 } }, { "x": "Mar 30", "y": 4700, "meta": { "margin": 29.5, "yoy": 3 } }, { "x": "Mar 31", "y": 5000, "meta": { "margin": 27.9, "yoy": 3 } }, { "x": "Apr 1", "y": 5100, "meta": { "margin": 24.1, "yoy": 2 } }, { "x": "Apr 2", "y": 5000, "meta": { "margin": 23.3, "yoy": 1 } }, { "x": "Apr 3", "y": 4900, "meta": { "margin": 26.4, "yoy": 0 } }, { "x": "Apr 4", "y": 5000, // Full configuration available through Raw or Copy. 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-triple-retail.json --out radial-column-triple-retail.svg --with-table` (save the options above as JSON first)