Apex chart Charts order in Mixed chart

Question

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 :

An area chart
A Bar chart
A line chart

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.

What i've tried

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
    },
  ]
},

Minimal reproducible example

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);

Hi, would you mind sharing some code here? Hard to help without. — kissu, Dec 01 '21 at 16:50

score 1 · Answer 1 · edited Dec 01 '21 at 16:50

1

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>

edited Dec 01 '21 at 16:50

kissu

40,416
14
65
133

answered Dec 01 '21 at 00:05

timewastingprofessional

608
5
11

I guess this is the right approach indeed. – kissu Dec 01 '21 at 16:50

Hasan Bilir · Answer 2 · 2022-03-08T11:34:56.843

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');
                }
            }
        },

score 1 · Accepted Answer · answered May 18 '22 at 10:25

1

Solution

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);
      }
   }
}

answered May 18 '22 at 10:25

RenaudC5

3,553
1
11
29

I recommend using `template $refs` rather than `querySelector` tho. – kissu May 18 '22 at 10:26
Can you explain a bit more about this ? Since the library is initializing the charts, how can i acces it using `$refs` ? – RenaudC5 May 18 '22 at 10:28
1

You can always traverse the DOM from a higher referenced `$ref` on your Vue component. – kissu May 18 '22 at 10:33
I can only add a ref to the Apex chart like ``. Then after accesing it using `this.$refs['bandwith-chart']` I don't know how to access the element with the `.apexcharts-area-series` class which is not a direct children – RenaudC5 May 18 '22 at 12:11

Apex chart Charts order in Mixed chart

What i've tried

Minimal reproducible example

3 Answers3

Solution