var options = {
  series: [
    {
      name: 'Units sold',
      data: [44, 55, 41, 67, 22, 43, 21, 33, 45, 31, 87, 65, 35],
    },
  ],
  annotations: {
    points: [
      {
        x: 'Pomegranates',
        seriesIndex: 0,
        label: {
          borderColor: '#775DD0',
          offsetY: 0,
          style: {
            color: '#fff',
            background: '#775DD0',
          },
          text: 'Best seller',
        },
      },
    ],
  },
  chart: {
    height: 350,
    type: 'bar',
  },
  title: {
    text: 'Fruit Sales by Type',
    align: 'left',
  },
  plotOptions: {
    bar: {
      borderRadius: 10,
      columnWidth: '50%',
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: 0,
  },
  xaxis: {
    labels: {
      rotate: -45,
    },
    categories: [
      'Apples',
      'Oranges',
      'Strawberries',
      'Pineapples',
      'Mangoes',
      'Bananas',
      'Blackberries',
      'Pears',
      'Watermelons',
      'Cherries',
      'Pomegranates',
      'Tangerines',
      'Papayas',
    ],
    tickPlacement: 'on',
  },
  yaxis: {
    title: {
      text: 'Units sold (k)',
    },
  },
}

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