# Nested donut + spectrum ring (Radial Column example)

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

A nested donut (last week inside, this week outside) in the centre of a spectrum column ring.

- Chart type: `radialColumn` (Radial Column)
- Collection: Radial Column · Radial Column · Ring & inner layers
- Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/nested.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=nested

## 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": 500,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Throughput",
      "data": [
        42,
        41,
        38,
        39,
        41,
        39,
        45,
        50,
        59,
        62,
        71,
        72,
        75,
        81,
        81,
        81,
        79,
        77,
        75,
        67,
        57,
        52,
        48,
        39,
        38,
        35,
        36,
        35,
        40,
        40,
        43,
        49,
        55,
        63,
        67,
        74,
        78,
        83,
        83,
        77,
        77,
        74,
        69,
        61,
        54,
        48,
        45,
        36,
        32,
        31,
        34,
        38,
        41,
        42,
        43,
        48,
        58,
        63,
        73,
        80,
        80,
        84,
        84,
        83,
        75,
        74,
        68,
        65,
        60,
        52,
        45,
        37
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "00:00",
      "00:20",
      "00:40",
      "01:00",
      "01:20",
      "01:40",
      "02:00",
      "02:20",
      "02:40",
      "03:00",
      "03:20",
      "03:40",
      "04:00",
      "04:20",
      "04:40",
      "05:00",
      "05:20",
      "05:40",
      "06:00",
      "06:20",
      "06:40",
      "07:00",
      "07:20",
      "07:40",
      "08:00",
      "08:20",
      "08:40",
      "09:00",
      "09:20",
      "09:40",
      "10:00",
      "10:20",
      "10:40",
      "11:00",
      "11:20",
      "11:40",
      "12:00",
      "12:20",
      "12:40",
      "13:00",
      "13:20",
      "13:40",
      "14:00",
      "14:20",
      "14:40",
      "15:00",
      "15:20",
      "15:40",
      "16:00",
      "16:20",
      "16:40",
      "17:00",
      "17:20",
      "17:40",
      "18:00",
      "18:20",
      "18:40",
      "19:00",
      "19:20",
      "19:40",
      "20:00",
      "20:20",
      "20:40",
      "21:00",
      "21:20",
      "21:40",
      "22:00",
      "22:20",
      "22:40",
      "23:00",
      "23:20",
      "23:40"
    ]
  },
  "plotOptions": {
    "radialColumn": {
      "aggregate": "mean",
      "innerRadius": 0.56,
      "layers": [
        {
          "type": "nestedDonut",
          "name": "Traffic mix",
          "labels": [
            "Web",
            "Mobile",
            "API",
            "Partner"
          ],
          "data": [
            {
              "name": "Last week",
              "data": [
                38,
                27,
                22,
                13
              ]
            },
            {
              "name": "This week",
              "data": [
                34,
                31,
                24,
                11
              ]
            }
          ]
        }
      ]
    }
  }
}

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