External Labels LR

Dot nodes, left to right, labels beside the dots.

Chart type
Tree tree
Tier
Premium
Collection
Tree
Render
Live, site theme
View .md Agent setup
LIVE/tree/external-labels-lr22 of 37 in Tree

Configuration

Raw Standalone
const options = {
  chart: {
    height: 620,
    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: "left-to-right",
      node: {
        template: "dot"
      }
    }
  },
  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?