<template>
  <div>
    <div id="chart">
      <apexchart
        type="bar"
        height="410"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: 'Units sold',
          data: [820, 940, 610, 480, 560, 720, 390, 680, 900, 430, 350, 640],
        },
      ],
      chartOptions: {
        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,
          },
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}

#apexcharts-canvas {
  margin: 0 auto;
}
</style>