var options = {
  series: [28800, 8400, 2100, 1700],
  chart: {
    type: 'unit',
    height: 470,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: ['Oak', 'Silver birch', 'Rowan', 'Wild cherry'],
  // Green where the canopy is dense, then earth tones for the smaller species:
  // four greens would be a single unreadable mass at this dot size, while green
  // plus ochre plus bark keeps the tree looking like a tree.
  colors: ['#2E7D32', '#7CB342', '#C9A227', '#8D6E63'],
  plotOptions: {
    unit: {
      layout: 'custom',
      // One of the shapes in apexcharts/unit-shapes.
      positions: 'tree',
      transition: 'flow',
      unitValue: 50,
      clusterLabels: {
        external: {
          show: true,
        },
      },
    },
  },
  legend: {
    show: false,
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()