var options = {
  series: [
    {
      name: 'Phones',
      data: [44, 55, 41, 67, 22, 43],
    },
    {
      name: 'Tablets',
      data: [13, 23, 20, 8, 13, 27],
    },
    {
      name: 'Laptops',
      data: [11, 17, 15, 15, 21, 14],
    },
    {
      name: 'Wearables',
      data: [21, 7, 25, 13, 22, 8],
    },
  ],
  chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    toolbar: {
      show: true,
    },
    zoom: {
      enabled: true,
    },
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0,
        },
      },
    },
  ],
  plotOptions: {
    bar: {
      horizontal: false,
      borderRadius: 10,
      borderRadiusApplication: 'end', // 'around', 'end'
      borderRadiusWhenStacked: 'last', // 'all', 'last'
      dataLabels: {
        total: {
          enabled: true,
          style: {
            fontSize: '13px',
            fontWeight: 900,
          },
        },
      },
    },
  },
  title: {
    text: 'Revenue by Product Line',
    align: 'left',
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return '$' + val + 'k'
      },
    },
  },
  legend: {
    position: 'right',
    offsetY: 40,
  },
  fill: {
    opacity: 1,
  },
}

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