vue3-apexcharts icon indicating copy to clipboard operation
vue3-apexcharts copied to clipboard

BoxPlot update causes chart to go blank

Open MetRonnie opened this issue 2 years ago • 4 comments

When I update the series the chart goes blank.

Repro: https://play.vuejs.org/#...

<script setup>
import { ref } from 'vue'
import VueApexCharts from 'vue3-apexcharts'

const series = ref([{
  data: [
    { x: 'meow', y: [1,2,3,4,5] },
    { x: 'badger', y: [4,5,7,8,11] },
  ]
}])

const options = {
  plotOptions: {
    bar: { horizontal: true }
  }
}

const updateSeries = () => {
  series.value = [{
    data: [
      { x: 'meow', y: [1,4,4,5,6] },
      { x: 'badger', y: [4,5,6,7,10] },
    ]
  }]
}
</script>

<template>
  <VueApexCharts :series="series" type="boxPlot" :options="options" />
  <button @click="updateSeries">Update</button>
</template>

MetRonnie avatar Jun 26 '23 15:06 MetRonnie

It turns out resizing the page causes the chart data to reappear.

Also it might be that it only happens in iframes like JSFiddle, Codepen etc.

MetRonnie avatar Jun 26 '23 17:06 MetRonnie