Apexchart

ApexCharts is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of ApexCharts. For more details

Installing via npm
npm install apexcharts --save
Script
<apexchart :options="chart1.options" :series="chart1.series" />
        
<script>
  import ApexCharts from'apexcharts'

  const Apexcharts = () => {
    const chart = {
      options: {
        chart: {
          type: 'bar',
          height: 350
        },
        colors: ["#3a57e8", "#4bc7d2"],
        plotOptions: {
          bar: {
            horizontal: true,
            dataLabels: {
              position: 'top',
            },
          }
        },
        dataLabels: {
          enabled: true,
          offsetX: -6,
          style: {
            fontSize: '12px',
          }
        },
        stroke: {
          show: true,
          width: 1,
        },
        tooltip: {
          shared: true,
          intersect: false
        },
        xaxis: {
          categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
        },
      },
      series: [{
        data: [44, 55, 41, 64, 22, 43, 21]
      }, {
        data: [53, 32, 33, 52, 13, 44, 32]
      }],
    }
      }
</script>
Live Customizer Next