# Three inner layers (Radial Column example)

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

Pie, donut and nested donut inside one column ring; every layer has its own legend entries, tooltip and keyboard group (PageDown).

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

## 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": "Orders",
      "data": [
        48,
        50,
        59,
        64,
        67,
        68,
        69,
        64,
        60,
        57,
        49,
        42,
        37,
        33,
        31,
        30,
        29,
        34,
        36,
        41,
        49,
        54,
        61,
        64,
        69,
        70,
        66,
        62,
        61,
        59,
        50,
        43,
        34,
        32,
        27,
        24,
        29,
        28,
        34,
        37,
        47,
        53,
        60,
        68,
        69,
        67,
        70,
        67,
        66,
        57,
        48,
        42,
        33,
        30,
        29,
        24,
        27,
        29,
        35,
        43
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "00:00",
      "00:24",
      "00:48",
      "01:12",
      "01:36",
      "02:00",
      "02:24",
      "02:48",
      "03:12",
      "03:36",
      "04:00",
      "04:24",
      "04:48",
      "05:12",
      "05:36",
      "06:00",
      "06:24",
      "06:48",
      "07:12",
      "07:36",
      "08:00",
      "08:24",
      "08:48",
      "09:12",
      "09:36",
      "10:00",
      "10:24",
      "10:48",
      "11:12",
      "11:36",
      "12:00",
      "12:24",
      "12:48",
      "13:12",
      "13:36",
      "14:00",
      "14:24",
      "14:48",
      "15:12",
      "15:36",
      "16:00",
      "16:24",
      "16:48",
      "17:12",
      "17:36",
      "18:00",
      "18:24",
      "18:48",
      "19:12",
      "19:36",
      "20:00",
      "20:24",
      "20:48",
      "21:12",
      "21:36",
      "22:00",
      "22:24",
      "22:48",
      "23:12",
      "23:36"
    ]
  },
  "plotOptions": {
    "radialColumn": {
      "innerRadius": 0.62,
      "layers": [
        {
          "type": "pie",
          "name": "Channel",
          "labels": [
            "Direct",
            "Retail",
            "Online"
          ],
          "data": [
            44,
            31,
            25
          ]
        },
        {
          "type": "donut",
          "name": "Region",
          "labels": [
            "EMEA",
            "Americas",
            "APAC",
            "Other"
          ],
          "data": [
            36,
            33,
            22,
            9
          ]
        },
        {
          "type": "nestedDonut",
          "name": "Plan",
          "labels": [
            "Basic",
            "Pro",
            "Enterprise"
          ],
          "data": [
            [
              50,
              35,
              15
            ],
            [
              42,
              38,
              20
            ]
          ]
        }
      ]
    }
  }
}

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