I'm currently using the library ApexChart and more particulary Vue apex chart combined with nuxt.
I'm building a dashboard and I'm trying to build a mixed chart composed of :
The three charts are displaying in the following order (from back to front) : Area - Bar - Line
I'd like to change the order to get the bar chart to the back but i don't see how to do it.
I've tried to change the order of the series to put the bar chart last
series() {
return [
{
name: 'My Line chart',
type: 'line',
data: this.capacityCalls
},
{
name: 'My Area Chart',
type: 'area',
data: this.callsRealProd
},
{
name: 'My Bar Chart',
type: 'bar',
data: this.callsToMake
},
]
},
Here is a minimal reproducible event.
<template>
<VueApexCharts type="line" height="700" :options="chartOptions" :series="series" />
</template>
<script>
export default {
name: "Hello",
data: () => {
return {
series: [{
name: 'TEAM A',
type: 'line',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'TEAM B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'TEAM C',
type: 'bar',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
chartOptions: {
colors: ['#F44E7C','#FBBC04','#49619C'],
plotOptions: {
bar: {
columnWidth: '100%'
}
},
stroke: {
curve: 'smooth',
width: [3, 3, 1]
},
fill: {
opacity: [1, 0.6, 0.2]
},
},
}
},
}
</script>
I'm using nuxt.js and loading the npm library apexChart throught the following plugin :
import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'
Vue.component('VueApexCharts', VueApexCharts);
It probably adds each chart in series as they finish loading individually. How about creating a separate component for each chart and defining the order by defining components in your template?
<line-chart></line-chart>
<area-chart></area-chart>
<bar-chart></bar-chart>
I had a similar problem, I'm not sure what a logical solution. But the problem is solved as below with jquery.
chart: {
events: {
updated: function (chartContext, options) {
$('.apexcharts-area-series').insertAfter('.apexcharts-bar-series');
},
mounted: function (chartContext, options) {
$('.apexcharts-area-series').insertAfter('.apexcharts-bar-series');
}
}
},
Thanks to @Hasan Bilir answer i've make it works using the Element.insertAdjacentElement
here is how i did it using vanilla JS
chart: {
event: {
updated: function (chartContext, options) {
const barChart = document.querySelector('.apexcharts-area-series');
barChart.remove();
document.querySelector('.apexcharts-bar-series').insertAdjacentElement('afterend', barChart);
},
mounted: function (chartContext, options) {
const barChart = document.querySelector('.apexcharts-area-series');
barChart.remove();
document.querySelector('.apexcharts-bar-series').insertAdjacentElement('afterend', barChart);
}
}
}