CODEWITHSUNDEEP
vue.jsapexcharts
DockerUser12
DockerUser12

Reputation: 93

ApexCharts in Vue changing options does not work

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?

Upvotes: 4

Views: 1251

Answers (1)

DockerUser12
DockerUser12

Reputation: 93

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>

Upvotes: 3

Related Questions