apexcharts implementaion, vue-apexcharts in VUE
helper link: https://apexcharts.com/docs/vue-charts/
Step 1.
npm install --save apexcharts npm install --save vue-apexcharts
Step 2. Main.JS insert below code.
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'bootstrap'
//import 'bootstrap/dist/css/bootstrap.min.css'
import VueApexCharts from "vue-apexcharts";//*******1 apex added line in exising
//import 'jquery'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.config.productionTip = false
//Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
//Vue.use(bootstrap)
Vue.use(VueApexCharts);//*******2 apex added line in exising
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Step 3.
Create a vue page Apex.vue.
<template>
<div>
<VueApexCharts
width="500"
type="bar"
:options="options"
:series="series"
></VueApexCharts>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
export default {
name: "Apex",
components: {
VueApexCharts,
},
props: {},
data: function () {
return {
srchV: "",
Vendor: [],
mdlPart: "",
mdlVendor: "",
mdlStatus: "All",
options: {
chart: {
id: "vuechart-example",
toolbar: {
show: false,
},
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
},
series: [
{
name: "series-1",
data: [30, 40, 45, 50, 49, 60, 70, 90],
},
],
};
},
methods: {},
watch: {},
mounted: function () {},
};
</script>
<style>
</style>
