Triple semantics: a retail year
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.
Triple semantics
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": 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)
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": 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()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-triple-retail.json --out radial-column-triple-retail.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/triple-retail/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?