# Radial Layout (Tree example)

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

A module graph laid out on circles around the root.

- Chart type: `tree` (Tree)
- Collection: Tree · Tree
- Raw configuration: https://westcoast-charts.com/gallery-src/tree/radial-layout.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/premium/tree/radial-layout.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'

WestCoastCharts.use(types).use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
```

## Options

```js
const options = {
  chart: {
    height: 640,
    toolbar: {
      show: false
    },
    type: "tree"
  },
  series: [
    {
      data: [
        {
          name: "wcc",
          children: [
            {
              name: "core",
              children: [
                {
                  name: "graphics",
                  value: 42
                },
                {
                  name: "fill",
                  value: 18
                },
                {
                  name: "filters",
                  value: 9
                },
                {
                  name: "scales",
                  value: 31
                },
                {
                  name: "range",
                  value: 22
                },
                {
                  name: "formatters",
                  value: 14
                }
              ]
            },
            {
              name: "axes",
              children: [
                {
                  name: "xaxis",
                  value: 36
                },
                {
                  name: "yaxis",
                  value: 33
                },
                {
                  name: "grid",
                  value: 12
                },
                {
                  name: "ticks",
                  value: 10
                }
              ]
            },
            {
              name: "premium",
              children: [
                {
                  name: "sankey",
                  children: [
                    {
                      name: "layout",
                      value: 28
                    },
                    {
                      name: "ribbons",
                      value: 16
                    },
                    {
                      name: "particles",
                      value: 8
                    }
                  ]
                },
                {
                  name: "gantt",
                  children: [
                    {
                      name: "model",
                      value: 21
                    },
                    {
                      name: "time",
                      value: 12
                    },
                    {
                      name: "routing",
                      value: 17
                    }
                  ]
                },
                {
                  name: "tree",
                  children: [
                    {
                      name: "tidy",
                      value: 19
                    },
                    {
                      name: "radial",
                      value: 11
                    }
                  ]
                }
              ]
            },
            {
              name: "themes",
              children: [
                {
                  name: "presets",
                  value: 15
                },
                {
                  name: "tokens",
                  value: 9
                },
                {
                  name: "palettes",
                  value: 7
                }
              ]
            },
            {
              name: "a11y",
              children: [
                {
                  name: "describe",
                  value: 8
                },
                {
                  name: "keyboard",
                  value: 13
                },
                {
                  name: "table",
                  value: 6
                }
              ]
            },
            {
              name: "export",
              children: [
                {
                  name: "svg",
                  value: 9
                },
                {
                  name: "png",
                  value: 7
                },
                {
                  name: "csv",
                  value: 5
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  plotOptions: {
    tree: {
      orientation: "radial"
    }
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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