Documentation

Vue

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
Usage
import ApexCharts from'apexcharts'

OR

Direct <script> include

Another way is to directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

HTML Code

<div id="d-main"></div>

Script

setTimeout
(function () {
    "use strict";
    
  if (document.querySelectorAll('#d-main').length) {
      const options = {
          series: [{
              name: 'total',
              data: [94, 80, 94, 80, 94, 80, 94]
          }, {
              name: 'pipline',
              data: [72, 60, 84, 60, 74, 60, 78]
          }],
          chart: {
              fontFamily: '"Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
              height: 245,
              type: 'area',
              toolbar: {
                  show: false
              },
              sparkline: {
                  enabled: false,
              },
          },
          colors: ["#3a57e8", "#4bc7d2"],
          dataLabels: {
              enabled: false
          },
          stroke: {
              curve: 'smooth',
              width: 3,
          },
          yaxis: {
            show: true,
            labels: {
              show: true,
              minWidth: 19,
              maxWidth: 19,
              style: {
                colors: "#8A92A6",
              },
              offsetX: -5,
            },
          },
          legend: {
              show: false,
          },
          xaxis: {
              labels: {
                  minHeight:22,
                  maxHeight:22,
                  show: true,
                  style: {
                    colors: "#8A92A6",
                  },
              },
              lines: {
                  show: false  //or just here to disable only x axis grids
              },
              categories: ["Jan", "Feb", "Mar", "Apr", "Jun", "Jul", "Aug"]
          },
          grid: {
              show: false,
          },
          fill: {
              type: 'gradient',
              gradient: {
                  shade: 'dark',
                  type: "vertical",
                  shadeIntensity: 0,
                  gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
                  inverseColors: true,
                  opacityFrom: .4,
                  opacityTo: .1,
                  stops: [0, 50, 80],
                  colors: ["#3a57e8", "#4bc7d2"]
              }
          },
          tooltip: {
            enabled: true,
          },
      };

      var chart = new ApexCharts(document.querySelector("#d-main"), options);
      chart.render();
    }