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="chart"></div>

Script

var options = {
  series: [{
  name: 'Net Profit',
  data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
  name: 'Revenue',
  data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
  name: 'Free Cash Flow',
  data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
  chart: {
  type: 'bar',
  height: 300,
  toolbar:{
    show: false,
  }
},
plotOptions: {
  bar: {
    horizontal: false,
    columnWidth: '80%',
    endingShape: 'rounded'
  },
},
dataLabels: {
  enabled: false
},
stroke: {
  show: true,
  width: 2,
  colors: ['transparent']
},
xaxis: {
  categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
  title: {
    text: '$ (thousands)'
  }
},
fill: {
  opacity: 1
},
tooltip: {
  y: {
    formatter: function (val) {
      return "$ " + val + " thousands"
    }
  }
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();