var options = {
  series: [288000, 84000, 21000, 17000],
  chart: {
    type: 'unit',
    height: 470,
    animations: {
      enabled: true,
      speed: 900,
    },
  },
  labels: ['Reached', 'Engaged', 'Qualified', 'Converted'],
  // A funnel is ordered and its rings are already separated by geometry, so here a
  // ramp earns its keep - the eye reads "narrowing toward the bullseye". It turns
  // hue as it darkens and takes bigger steps than a pure tint scale would, so
  // neighbouring rings still separate at this dot size.
  colors: ['#7FC0DE', '#219EBC', '#0E7C7B', '#023047'],
  plotOptions: {
    unit: {
      layout: 'custom',
      // One of the shapes in apexcharts/unit-shapes.
      positions: 'target',
      transition: 'flow',
      unitValue: 500,
      clusterLabels: {
        // No outer labels here: those alternate down the two margins, which suits
        // a shape whose bands stack vertically. Concentric rings would need the
        // inner labels' leader lines to cross the outer rings, so the legend does
        // a cleaner job for a target.
        show: false,
      },
    },
  },
  legend: {
    position: 'bottom',
  },
}

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