Pyramid Hierarchy in JavaScript

var options = {
  series: [576, 168, 42, 34],
  chart: {
    type: 'unit',
    height: 470,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: ['Individual contributors', 'Team leads', 'Directors', 'Executives'],
  // The tiers are ordered, so the palette climbs - but it turns hue as it goes
  // rather than only getting darker, because four tints of one colour are close to
  // indistinguishable at this dot size. The apex is the darkest tier.
  colors: ['#F7C948', '#F0883E', '#D64545', '#2E4A62'],
  plotOptions: {
    unit: {
      layout: 'custom',
      // One of the shapes in apexcharts/unit-shapes.
      positions: 'pyramid',
      transition: 'flow',
      clusterLabels: {
        // A labelled pyramid: each tier is named beside itself, so the reader
        // never has to count dots against a legend.
        external: {
          show: true,
        },
      },
    },
  },
  legend: {
    show: false,
  },
}

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