# Triple semantics: load, price and change (Radial Column example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/triple-energy/ · Index for agents: https://westcoast-charts.com/llms.txt

How to read: bar length = load per hour · colour = price against the daily average (diverging at 0) · signed mini bars on the rim = change vs yesterday (outward = more, inward = less) · inside = energy source mix.

- Chart type: `radialColumn` (Radial Column)
- Collection: Radial Column · Radial Column · Triple semantics
- Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/triple-energy.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=triple-energy

## 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": 520,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Load (kWh)",
      "data": [
        {
          "x": "00:00",
          "y": 24,
          "meta": {
            "price": -6,
            "dy": 9
          }
        },
        {
          "x": "01:00",
          "y": 26,
          "meta": {
            "price": -1,
            "dy": 15
          }
        },
        {
          "x": "02:00",
          "y": 26,
          "meta": {
            "price": 0,
            "dy": 20
          }
        },
        {
          "x": "03:00",
          "y": 23,
          "meta": {
            "price": -3,
            "dy": 22
          }
        },
        {
          "x": "04:00",
          "y": 22,
          "meta": {
            "price": -9,
            "dy": 21
          }
        },
        {
          "x": "05:00",
          "y": 21,
          "meta": {
            "price": -12,
            "dy": 17
          }
        },
        {
          "x": "06:00",
          "y": 28,
          "meta": {
            "price": -3,
            "dy": 11
          }
        },
        {
          "x": "07:00",
          "y": 35,
          "meta": {
            "price": 2,
            "dy": 3
          }
        },
        {
          "x": "08:00",
          "y": 45,
          "meta": {
            "price": 7,
            "dy": -5
          }
        },
        {
          "x": "09:00",
          "y": 52,
          "meta": {
            "price": 8,
            "dy": -12
          }
        },
        {
          "x": "10:00",
          "y": 54,
          "meta": {
            "price": 4,
            "dy": -18
          }
        },
        {
          "x": "11:00",
          "y": 48,
          "meta": {
            "price": -1,
            "dy": -21
          }
        },
        {
          "x": "12:00",
          "y": 41,
          "meta": {
            "price": -4,
            "dy": -22
          }
        },
        {
          "x": "13:00",
          "y": 38,
          "meta": {
            "price": -3,
            "dy": -19
          }
        },
        {
          "x": "14:00",
          "y": 37,
          "meta": {
            "price": 2,
            "dy": -14
          }
        },
        {
          "x": "15:00",
          "y": 37,
          "meta": {
            "price": 7,
            "dy": -7
          }
        },
        {
          "x": "16:00",
          "y": 34,
          "meta": {
            "price": 8,
            "dy": 1
          }
        },
        {
          "x": "17:00",
          "y": 28,
          "meta": {
            "price": 11,
            "dy": 9
          }
        },
        {
          "x": "18:00",
          "y": 27,
          "meta": {
            "price": 6,
            "dy": 16
          }
        },
        {
          "x": "19:00",
          "y": 25,
          "meta": {
            "price": 3,
            "dy": 20
          }
        },
        {
          "x": "20:00",
          "y": 23,
          "meta": {
            "price": 4,
            "dy": 22
          }
        },
        {
          "x": "21:00",
          "y": 21,
          "meta": {
            "price": 2,
            "dy": 21
          }
        },
        {
          "x": "22:00",
          "y": 22,
          "meta": {
            "price": 7,
            "dy": 17
          }
        },
        {
          "x": "23:00",
          "y": 24,
          "meta": {
            "price": 8,
            "dy": 11
          }
        }
      ]
    }
  ],
  "plotOptions": {
    "radialColumn": {
      "innerRadius": 0.58,
      "encode": {
        "angle": "Hour",
        "color": {
          "field": "price",
          "name": "Price vs avg",
          "unit": "ct",
          "scale": "diverging"
        },
        "delta": {
          "field": "dy",
          "name": "vs yesterday",
          "unit": "%",
          "style": "bars"
        },
        "guide": true
      },
      "layers": [
        {
          "type": "donut",
          "name": "Source",
          "labels": [
            "Solar",
            "Grid",
            "Battery"
          ],
          "data": [
            38,
            45,
            17
          ]
        }
      ]
    }
  }
}

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-energy.json --out radial-column-triple-energy.svg --with-table` (save the options above as JSON first)