External Labels

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

const options = {
  chart: {
    height: 460,
    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: {
      node: {
        template: "dot"
      }
    }
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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