Vue

by Alen Subasic

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<div id="chart">
  <apexchart type=bar height=350 :options="chartOptions" :series="series" />
</div>

Vue

new Vue({
  el: '#chart',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [{
      name: '8th',
      data: [44, 33, 25]
    }, {
      name: '9th',
      data: [76, 34, 45]
    }, {
      name: '10th',
      data: [30, 15, 20]
    }],
    chartOptions: {
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '30%',
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },

      xaxis: {
        categories: ['KCIA', 'KSCA', 'SWVI'],
      },
      fill: {
        opacity: 1
      }
    }
  }
})