var options = {
  series: [38, 52, 31, 44, 22],
  chart: {
    width: 480,
    type: 'donut',
    dropShadow: {
      enabled: true,
      color: '#111',
      top: -1,
      left: 2,
      blur: 3,
      opacity: 0.2,
    },
  },
  stroke: {
    width: 0,
  },
  plotOptions: {
    pie: {
      dataLabels: {
        external: {
          show: true,
          formatter: function (name, opts) {
            return [name, opts.percent.toFixed(1) + '%']
          },
        },
      },
      donut: {
        labels: {
          show: true,
          total: {
            showAlways: true,
            show: true,
          },
        },
      },
    },
  },
  legend: {
    show: false,
  },
  labels: ['Comedy', 'Action', 'SciFi', 'Drama', 'Horror'],
  dataLabels: {
    enabled: false,
  },
  fill: {
    type: 'pattern',
    opacity: 1,
    pattern: {
      enabled: true,
      style: [
        'verticalLines',
        'squares',
        'horizontalLines',
        'circles',
        'slantedLines',
      ],
    },
  },
  states: {
    hover: {
      filter: 'none',
    },
  },
  theme: {
    palette: 'palette2',
  },
  title: {
    text: 'Favourite Movie Type',
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200,
        },
        legend: {
          position: 'bottom',
        },
      },
    },
  ],
}

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