Per Node Options

Colour, badge, subtitle and initial collapse set per node in the data.

Chart type
Tree tree
Tier
Premium
Collection
Tree
Render
Live, site theme
View .md Agent setup
LIVE/tree/per-node-options12 of 37 in Tree

Configuration

Raw Standalone
const options = {
  chart: {
    height: 820,
    toolbar: {
      show: false
    },
    type: "tree"
  },
  series: [
    {
      data: [
        {
          id: "p26",
          name: "Kira Lund",
          title: "Chief Executive",
          children: [
            {
              id: "p9",
              name: "Maya Grieve",
              title: "VP Engineering",
              children: [
                {
                  id: "p4",
                  name: "Yara Quist",
                  title: "Platform lead",
                  children: [
                    {
                      id: "p1",
                      name: "Ava Holm",
                      title: "Site reliability",
                      children: undefined
                    },
                    {
                      id: "p2",
                      name: "Zane Quist",
                      title: "Infrastructure",
                      children: undefined
                    },
                    {
                      id: "p3",
                      name: "Vik Thorne",
                      title: "Developer tools",
                      children: undefined
                    }
                  ]
                },
                {
                  id: "p8",
                  name: "Elif Oakes",
                  title: "Product engineering",
                  children: [
                    {
                      id: "p5",
                      name: "Vik Grieve",
                      title: "Web",
                      children: undefined
                    },
                    {
                      id: "p6",
                      name: "Sana Faro",
                      title: "Mobile",
                      children: undefined
                    },
                    {
                      id: "p7",
                      name: "Ben Ivers",
                      title: "API",
                      children: undefined
                    }
                  ]
                }
              ],
              color: "#7c3aed"
            },
            {
              id: "p15",
              name: "Ben Oakes",
              title: "VP Product",
              children: [
                {
                  id: "p12",
                  name: "Dev Castell",
                  title: "Design lead",
                  children: [
                    {
                      id: "p10",
                      name: "Sana Oakes",
                      title: "Research",
                      children: undefined
                    },
                    {
                      id: "p11",
                      name: "Cleo Dorsey",
                      title: "Visual design",
                      children: undefined
                    }
                  ]
                },
                {
                  id: "p13",
                  name: "Rafa Marlow",
                  title: "PM, Billing",
                  children: undefined
                },
                {
                  id: "p14",
                  name: "Tomas Quist",
                  title: "PM, Growth",
                  children: undefined
                }
              ],
              collapsed: true
            },
            {
              id: "p22",
              name: "Pia Rook",
              title: "VP Sales",
              children: [
                {
                  id: "p18",
                  name: "Elif Jarl",
                  title: "EMEA",
                  children: [
                    {
                      id: "p16",
                      name: "Iris Faro",
                      title: "Account exec.",
                      children: undefined
                    },
                    {
                      id: "p17",
                      name: "Tomas Sorel",
                      title: "Account exec.",
                      children: undefined
                    }
                  ]
                },
                {
                  id: "p20",
                  name: "Pia Thorne",
                  title: "Americas",
                  children: [
                    {
                      id: "p19",
                      name: "Yara Arden",
                      title: "Account exec.",
                      children: undefined
                    }
                  ]
                },
                {
                  id: "p21",
                  name: "Dev Faro",
                  title: "APAC",
                  children: undefined
                }
              ],
              color: "#ea580c",
              badge: "Hiring"
            },
            {
              id: "p25",
              name: "Elif Rook",
              title: "CFO",
              children: [
                {
                  id: "p23",
                  name: "Rafa Thorne",
                  title: "Controller",
                  children: undefined
                },
                {
                  id: "p24",
                  name: "Wren Faro",
                  title: "FP&A",
                  children: undefined
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()

This example uses Premium modules. Compare licences · Embedding in a distributed product?