Apex Charts 📈 ​
Apex charts is modern JavaScript charting library to build interactive charts and visualizations with simple API. Please refer ApexCharts Documentation, npm for a full list of instructions and other options.
Installation ​
bash
# npm
npm install vue3-apexcharts
npm install apexcharts
# yarn
yarn add vue3-apexcharts
yarn add apexchartsUsage in Boot File ​
javascript
import VueApexCharts from 'vue3-apexcharts'
import {boot} from 'quasar/wrappers'
export default boot(({app}) => {
app.component("VueApexCharts", VueApexCharts)
})Usage in Component ​
vue
<template>
<VueApexCharts
type="candlestick"
height="400"
:options="chartConfig"
:series="series"
/>
</template>
<script>
import {defineComponent, ref} from 'vue'
export default defineComponent({
name: "ApexChartStocksPrices",
setup() {
return {
series: [{
"data": [{"x": "7/12/2023", "y": [150, 170, 50, 100]}, {
"x": "8/12/2023",
"y": [200, 400, 170, 330]
}, {"x": "9/12/2023", "y": [330, 340, 250, 280]}, {
"x": "10/12/2023",
"y": [300, 330, 200, 320]
}, {"x": "11/12/2023", "y": [320, 450, 280, 350]}, {
"x": "12/12/2023",
"y": [300, 350, 80, 250]
}, {"x": "13/12/2023", "y": [200, 330, 170, 300]}, {
"x": "14/12/2023",
"y": [200, 220, 70, 130]
}, {"x": "15/12/2023", "y": [220, 270, 180, 250]}, {
"x": "16/12/2023",
"y": [200, 250, 80, 100]
}, {"x": "17/12/2023", "y": [150, 170, 50, 120]}, {
"x": "18/12/2023",
"y": [110, 450, 10, 420]
}, {"x": "19/12/2023", "y": [400, 480, 300, 320]}, {"x": "20/12/2023", "y": [380, 480, 350, 450]}]
}],
date: ref('2022-06-09')
}
},
computed: {
chartConfig() {
return {
"chart": {"parentHeightOffset": 0, "toolbar": {"show": false}},
"plotOptions": {
"bar": {"columnWidth": "40%"},
"candlestick": {"colors": {"upward": "#28c76f", "downward": "#ea5455"}}
},
"grid": {
"padding": {"top": -10},
"borderColor": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)",
"xaxis": {"lines": {"show": true}}
},
"yaxis": {
"tooltip": {"enabled": true},
"crosshairs": {"stroke": {"color": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)"}},
"labels": {
"style": {
"colors": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.42)",
"fontSize": "0.8125rem"
}
}
},
"xaxis": {
"type": "datetime",
"axisBorder": {"show": false},
"axisTicks": {"color": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)"},
"crosshairs": {"stroke": {"color": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.16)"}},
"labels": {
"style": {
"colors": this.$q.dark.isActive ? "rgba(208,212,241,0.42)" : "rgba(47,43,61,0.42)",
"fontSize": "0.8125rem"
}
}
}
}
}
}
})
</script>