var options = {
  series: [
    {
      name: 'Subscribers',
      data: [1200, 480, 160, 32],
    },
  ],
  chart: {
    type: 'funnel',
    height: 420,
  },
  plotOptions: {
    funnel: {
      shape: 'trapezoid',
      lastShape: 'taper',
    },
    bar: {
      barHeight: '90%',
      distributed: true,
    },
  },
  colors: ['#10B981', '#34D399', '#6EE7B7', '#A7F3D0'],
  dataLabels: {
    enabled: true,
    formatter: function (val, opt) {
      return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val
    },
    style: {
      colors: ['#064E3B'],
      fontSize: '13px',
      fontWeight: 600,
    },
  },
  title: {
    text: 'Newsletter Funnel — Tapered',
    align: 'middle',
  },
  xaxis: {
    categories: ['Delivered', 'Opened', 'Clicked', 'Converted'],
  },
  legend: {
    show: false,
  },
}

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