var options = {
  series: [57600, 16800, 4200, 3400],
  chart: {
    type: 'unit',
    height: 470,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: [
    'Repeat donors',
    'First-time',
    'Workplace drives',
    'Emergency call-ups',
  ],
  // Four hues, not four tints of one: at this dot size a lightness ramp is very
  // hard to read back, and the palest end all but disappears on a white card.
  // Crimson still carries two thirds of the heart, so the shape keeps its colour.
  colors: ['#E8264F', '#FF8A3D', '#00A6A0', '#1D4E89'],
  plotOptions: {
    unit: {
      layout: 'custom',
      // One of the shapes in apexcharts/unit-shapes.
      positions: 'heart',
      transition: 'flow',
      unitValue: 100,
      clusterLabels: {
        // Outer labels: each band is named in the margin with a leader line to
        // its own dots, the way a pie names its slices. It replaces the legend,
        // so no one has to match a swatch to a band.
        external: {
          show: true,
        },
      },
    },
  },
  legend: {
    show: false,
  },
}

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