[Chartjs]-Chart.js not loading on reload

by

0👍

Found a simple solution to this.

Just declare a new variable, say for example chartUpdated.
Then in your created or mounted hook, after you have updated the dynamic values to the chart object, update this.chartUpdated to true.

data() {
    return {
      chartUpdated: false,
      areaChartData: {
        labels: [],
        datasets: [
          {
            label: '',
            data: [],
            borderColor: colors.themeColor1,
            pointBackgroundColor: colors.foregroundColor,
            pointBorderColor: colors.themeColor1,
            pointHoverBackgroundColor: colors.themeColor1,
            pointHoverBorderColor: colors.foregroundColor,
            pointRadius: 4,
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            fill: true,
            borderWidth: 2,
            backgroundColor: colors.themeColor1_10
          }
        ]
      }
    };
  },
  async created() {
    const response = await axios.get('https://yourapi.com')
    const data = response.data.data
    this.areaChartData.labels = data.map((x) => x.day)
    this.areaChartData.datasets[0].data = data.map((x) => x.total_member)
    this.chartUpdated = true
  }

Then in your template

<area-chart v-if="chartUpdated" :data="areaChartData" container-class="chart" shadow />

Leave a comment