var options = {
  series: [128, 96, 74, 52, 38],
  chart: {
    width: 380,
    type: 'donut',
  },
  plotOptions: {
    pie: {
      startAngle: -90,
      endAngle: 270,
    },
  },
  labels: ['Compute', 'Storage', 'Database', 'Networking', 'Analytics'],
  dataLabels: {
    enabled: false,
  },
  fill: {
    type: 'gradient',
  },
  legend: {
    formatter: function (val, opts) {
      return val + ' - $' + opts.w.globals.series[opts.seriesIndex] + 'k'
    },
  },
  title: {
    text: 'Cloud Spend by Service',
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200,
        },
        legend: {
          position: 'bottom',
        },
      },
    },
  ],
}

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