4

When I switch between two different charts(that both have different series and options) from ApexChart using v-if that have different chart options set there is some kind of bug that does makes the changed chart not render correctly.

  <apexchart v-if="switch1" :options="chartOptions1" :series="series1"></apexchart>
  <apexchart v-else :options="chartOptions2" :series="series2"></apexchart>

So for example I have chart options that has fill set and one without. When I switch between them both have fill (the one that didnt have takes the fill options from the other). Here is the example of this behaviour:

https://codesandbox.io/s/line-with-upper-and-lower-band-apexchart-slhbs?file=/src/components/ChartBasic.vue

Anyone has idea how to fix this?

DockerUser12
  • 73
  • 5
  • 1
    There seem to be a couple of similar open issues in the `apexcharts/vue-apexcharts` repository, e.g.: https://github.com/apexcharts/vue-apexcharts/issues/322 and https://github.com/apexcharts/vue-apexcharts/issues/325. A slightly hacky workaround seems to be to use `v-show` instead of `v-if` – pkorhone Oct 15 '21 at 09:01
  • Hmm I tried v-show but with that the second chart does not render (show at all). – DockerUser12 Oct 15 '21 at 09:47

1 Answers1

2

So thanks to @pkorhone suggestion I managed to find current workaround for this matter is to use v-show instead of v-if and change the height of the other chart by a little bit so that it somehow forces the chart to rerender:

<apexchart v-show="switch1"  height="400" :options="chartOptionsBands" :series="seriesBands"></apexchart>
<apexchart v-show="!switch1" height="401" :options="chartOptions" :series="series"></apexchart>
DockerUser12
  • 73
  • 5