Expand Collapse
A 5 000-node tree opening at level 2; expand any branch.
Open the chart without page chrome ↗Drawing width at least 1,000 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
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 configimport 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
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()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export tree-expand-collapse.json --out tree-expand-collapse.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/tree/expand-collapse/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?