var options = {
  series: [
    {
      name: 'Units sold',
      data: [820, 940, 610, 480, 560, 720, 390, 680, 900, 430, 350, 640],
    },
  ],
  chart: {
    type: 'bar',
    height: 410,
    animations: {
      enabled: false,
    },
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '100%',
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: 1,
    colors: ['#000'],
  },
  yaxis: {
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
    title: {
      text: 'Units sold',
    },
  },
  xaxis: {
    categories: [
      'Vanilla',
      'Chocolate',
      'Strawberry',
      'Mint',
      'Mango',
      'Coffee',
      'Pistachio',
      'Caramel',
      'Cookies',
      'Coconut',
      'Lemon',
      'Berry',
    ],
  },
  grid: {
    position: 'back',
  },
  title: {
    text: 'Ice Cream Sales by Flavour',
    align: 'left',
  },
  subtitle: {
    text: 'Bars filled by a single clipped image',
    align: 'left',
  },
  fill: {
    type: 'image',
    opacity: 0.9,
    image: {
      src: '../../assets/images/stripes.jpg',
      width: 640,
      height: 427,
    },
  },
}

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