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
Direct <script> include

Another way is to directly include it in your html

import ApexChart from '@/components/custom/charts/ApexChart'
Vue Code
<ApexChart element="chart-1" :chartOption="chart1" />
Script

    chart1: {
        chart: {
          height: 80,
          type: 'area',
          sparkline: {
            enabled: true
          },
          group: 'sparklines'

        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          width: 3,
          curve: 'smooth'
        },
        fill: {
          type: 'gradient',
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.5,
            opacityTo: 0
          }
        },

        series: [{
          name: 'series1',
          data: [60, 15, 50, 30, 70]
        }],
        colors: ['#344ed1'],

        xaxis: {
          type: 'datetime',
          categories: ['2018-08-19T00:00:00', '2018-09-19T01:30:00', '2018-10-19T02:30:00', '2018-11-19T01:30:00', '2018-12-19T01:30:00']
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          }

        }
      },
Live Customizer Next