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 i vue-apexcharts

import vue3-apexcharts in main.js file

import ApexCharts from 'vue3-apexcharts';
Component
<ApexCharts type="line" :options="chartOptions" :series="chartSeries" height="350" />
Script
const chartOptions = ref({
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: false
    }
  },
  colors: ['#0dd6b8'],
  series: [{
    name: 'Desktops',
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight'
  },
  title: {
    text: 'Product Trends by Month',
    align: 'left'
  },
  grid: {
    row: {
      colors: ['#f3f3f3', 'transparent'],
      opacity: 0.5
    }
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  },
  yaxis: {
    min: 0,
    max: 150,
    tickAmount: 3
  }
});

const chartSeries = ref([{
  name: 'Desktops',
  data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}]);
Live Customizer Next