# Expand Collapse (Tree example)

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

A 5 000-node tree opening at level 2; expand any branch.

- Chart type: `tree` (Tree)
- Collection: Tree · Tree
- Raw configuration: https://westcoast-charts.com/gallery-src/tree/expand-collapse.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/premium/tree/expand-collapse.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

First chart of the page only; the example combines several charts or controls. Read the standalone example for the full source.

```js
const options = {
  chart: {
    height: 640,
    toolbar: {
      show: false
    },
    type: "tree"
  },
  series: [
    {
      data: [
        {
          name: "Node 1",
          children: [
            {
              name: "Node 2",
              children: [
                {
                  name: "Node 3",
                  children: [
                    {
                      name: "Node 4",
                      children: [
                        {
                          name: "Node 5",
                          children: [
                            {
                              name: "Node 6"
                            },
                            {
                              name: "Node 7"
                            },
                            {
                              name: "Node 8"
                            },
                            {
                              name: "Node 9"
                            }
                          ]
                        },
                        {
                          name: "Node 10",
                          children: [
                            {
                              name: "Node 11"
                            },
                            {
                              name: "Node 12"
                            },
                            {
                              name: "Node 13"
                            },
                            {
                              name: "Node 14"
                            }
                          ]
                        },
                        {
                          name: "Node 15",
                          children: [
                            {
                              name: "Node 16"
                            },
                            {
                              name: "Node 17"
                            },
                            {
                              name: "Node 18"
                            },
                            {
                              name: "Node 19"
                            },
                            {
                              name: "Node 20"
                            }
                          ]
                        },
                        {
                          name: "Node 21",
                          children: [
                            {
                              name: "Node 22"
                            },
                            {
                              name: "Node 23"
                            },
                            {
                              name: "Node 24"
                            },
                            {
                              name: "Node 25"
                            }
                          ]
                        },
                        {
                          name: "Node 26",
                          children: [
                            {
                              name: "Node 27"
                            },
                            {
                              name: "Node 28"
                            },
                            {
                              name: "Node 29"
                            },
                            {
                              name: "Node 30"
                            }
                          ]
                        },
                        {
                          name: "Node 31",
                          children: [
                            {
                              name: "Node 32"
                            },
                            {
                              name: "Node 33"
                            },
                            {
                              name: "Node 34"
                            }
                          ]
                        },
                        {
                          name: "Node 35",
                          children: [
                            {
                              name: "Node 36"
                            },
                            {
                              name: "Node 37"
                            },
                            {
                              name: "Node 38"
                            },
                            {
                              name: "Node 39"
                            },
                            {
                              name: "Node 40"
                            },
                            {
                              name: "Node 41"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      name: "Node 42",
                      children: [
                        {
                          name: "Node 43",
                          children: [
                            {
                              name: "Node 44"
                            },
                            {
                              name: "Node 45"
                            },
                            {
                              name: "Node 46"
                            },
                            {
                              name: "Node 47"
                            }
                          ]
                        },
                        {
                          name: "Node 48",
                          children: [
                            {
                              name: "Node 49"
                            },
                            {
                              name: "Node 50"
                            },
                            {
                              name: "Node 51"
                            },
                            {
                              name: "Node 52"
                            },
                            {
                              name: "Node 53"
                            },
                            {
                              name: "Node 54"
                            }
                          ]
                        },
                        {
                          name: "Node 55",
                          children: [
                            {
                              name: "Node 56"
                            },
                            {
                              name: "Node 57"
                            },
                            {
                              name: "Node 58"
                            }
                          ]
                        },
                        {
                          name: "Node 59",
                          children: [
                            {
                              name: "Node 60"
                            },
                            {
                              name: "Node 61"
                            },
                            {
                              name: "Node 62"
                            },
                            {
                              name: "Node 63"
                            },
                            {
                              name: "Node 64"
                            },
                            {
                              name: "Node 65"
                            },
                            {
                              name: "Node 66"
                            }
                          ]
                        },
                        {
                          name: "Node 67",
                          children: [
                            {
                              name: "Node 68"
                            },
                            {
                              name: "Node 69"
                            },
                            {
                              name: "Node 70"
                            }
                          ]
                        },
                        {
                          name: "Node 71",
                          children: [
                            {
                              name: "Node 72"
                            },
                            {
                              name: "Node 73"
                            },
                            {
                              name: "Node 74"
                            },
                            {
                              name: "Node 75"
                            },
                            {
                              name: "Node 76"
                            },
                            {
                              name: "Node 77"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      name: "Node 78",
                      children: [
                        {
                          name: "Node 79",
                          children: [
                            {
                              name: "Node 80"
                            },
                            {
                              name: "Node 81"
                            },
                            {
                              name: "Node 82"
                            },
                            {
                              name: "Node 83"
                            },
                            {
                              name: "Node 84"
                            }
                          ]
                        },
                        {
                          name: "Node 85",
                          children: [
                            {
                              name: "Node 86"
                            },
                            {
                              name: "Node 87"
                            },
                            {
                              name: "Node 88"
                            },
                            {
                              name: "Node 89"
                            }
                          ]
                        },
                        {
                          name: "Node 90",
                          children: [
                            {
                              name: "Node 91"
                            },
                            {
                              name: "Node 92"
                            },
                            {
                              name: "Node 93"
                            },
                            {
                              name: "Node 94"
                            },
                            {
                              name: "Node 95"
                            },
                            {
                              name: "Node 96"
                            }
                          ]
                        },
                        {
                          name: "Node 97",
                          children: [
                            {
                              name: "Node 98"
                            },
                            {
                              name: "Node 99"
                            },
                            {
                              name: "Node 100"
                            },
                            {
                              name: "Node 101"
                            },
                            {
                              name: "Node 102"
                            },
                            {
                              name: "Node 103"
                            },
                            {
                              name: "Node 104"
                            }
                          ]
                        },
                        {
                          name: "Node 105",
                          children: [
                            {
                              name: "Node 106"
                            },
                            {
                              name: "Node 107"
                            },
                            {
                              name: "Node 108"
                            },
                            {
                              name: "Node 109"
                            },
                            {
                              name: "Node 110"
                            },
                            {
                              name: "Node 111"
                            }
                          ]
                        },
                        {
                          name: "Node 112",
                          children: [
                            {
                              name: "Node 113"
                            },
                            {
                              name: "Node 114"
                            },
                            {
                              name: "Node 115"
                            },
                            {
                              name: "Node 116"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      name: "Node 117",
                      children: [
                        {
                          name: "Node 118",
                          children: [
                            {
                              name: "Node 119"
                            },
                            {
                              name: "Node 120"
                            },
  // ... truncated, use Copy or open the full config

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