Type of chart not updated properly when provided via options.chart.type

[christian-judt]

When initially providing the vue3-apexcharts component with its chart type via the vue-property options (by provinding options .chart.type) everything works fine. When I then change the chart type by the same means, various problems of varying serverity occur depending on the exact initial and the exact updating chart type.

Reproduction:

• CodePen:
  https://codepen.io/ming-syue/pen/ZEGazXq

• HTML:

<div id="appl">
  <button @click="toggleChartType">Toggle Chart Type</button>
  <div id="chart">
    <apexchart width="500" :options="options" :series="series"></apexchart>
  </div>
</div>

• JS:

Vue.component('apexchart', VueApexCharts);

var app = new Vue({
  el: '#appl',
  data: {
    // replace "bar" with "line" here to reproduce the problems
    // occuring when transitioning from a line chart to a bar chart
    options: { chart: { type: "bar" }},
    series: [{ data: [[1, 34], [2, 43], [3, 31], [4, 43], [5, 33], [6, 52]] }]
  },
  methods: {
    toggleChartType()
    {
      this.options = { ...this.options, chart: { ...this.options.chart,
        type: this.options.chart.type === 'bar' ? 'line' : 'bar'
      }};
    }
  }
});

I do not consider this a serious problem, since it can simply be worked around by using the vue-property type instead of the property options to initialize and update the chart type, but it should be a relatively simple fix on your end too.