Vue - Apexchart chart not loading on created()

[russeljime]

I noticed a bug with my apexchart bar graph. When my dashboard initially loads, the data in the graph is fully functional, but when I visit another route and goes back to my dashboard, the graph and labels is not loading anymore unless I hit the refresh button.

<div id="chart2">
      <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
    </div>

<script>
import VueApexCharts from 'vue-apexcharts'

  export default {
    components: {
      apexchart: VueApexCharts
    },

    data: () => ({
      series: [{
        data: []
      }],
      chartOptions: {
        chart: {
          height: 350,
          type: 'bar',
          events: {
            click: function(chart, w, e) {
            }
          }
        },
        plotOptions: {
          bar: {
            columnWidth: '45%',
            distributed: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          show: false
        },
        xaxis: {
          categories: [],
          labels: {
            style: {           
              fontSize: '12px'
            }
          }
        }
      },
    }),
```

    created () {
      this.getCorporateObjectiveScore ()
    },

     methods: {
      getCorporateObjectiveScore () {
        axios.get('/api/corporate-objective-chart')
        .then(response => {
          this.chartOptions2.xaxis.categories = response.data.xAxis
          this.series2[0].data = response.data.yAxis
        })
        .catch(error => console.log(error))
      },
    }
  }`

[devSarry]

+1 on this issue. I'm doing something similar but binding the series data to a computed prop. But its not updating.

[ricky11]

did you all solve this? i think try using a lifecycle hook to render the chart again or keep alive the component?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.