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 VueApexCharts from 'vue3-apexcharts';
Component
<<ApexCharts class="d-flex align-items-center justify-content-center" type="line" :options="chartOptions" :series="chartSeries" height="350" />
Script
const chartOptions = ref({
    chart: {
        height: 350,
        type: 'line',
        zoom: {
            enabled: false
        }
    },
    colors: ['#089bab'],
    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: 5
    }
});

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