chartjs-plugin-style icon indicating copy to clipboard operation
chartjs-plugin-style copied to clipboard

Cannot read property 'data' of undefined - after chartData.datasets.splice()

Open namjeongho opened this issue 4 years ago • 0 comments

Hi~ This plugin is very awesome. Thank you very much for developing this plugin. I am using this plugin in my website. But I found an error occurred when removing chart dataset.

Below is the browser error messages

TypeError: Cannot read property 'data' of undefined
    at ChartElement.determineDataLimits (Chart.js?30ef:12997)
    at ChartElement.update (Chart.js?30ef:11502)
    at fitBoxes (Chart.js?30ef:7127)
    at Object.update (Chart.js?30ef:7338)
    at Chart.updateLayout (Chart.js?30ef:9680)
    at Chart.update (Chart.js?30ef:9633)
    at VueComponent.update (Chart.vue?36ee:111)
    at VueComponent.removeChart (test.vue?b018:138)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)

environment: nuxt.js, vuetify, vue-chartjs, chartjs, chartjs-plugin-style

Below is my summarized sample code:

Chart.vue component

<script>
import { Line, mixins } from 'vue-chartjs'
import 'chartjs-plugin-style'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: {
    chartData: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  methods: {
    update () {
      this.$data._chart.update()
    }
  }
}

Page

<template>
  <chart ref="chart" :chart-data="chartData" :options="options" />
</template>
<script>
export default {
  data () {
    chartData: {
      datasets: []
    }
    methods: {
      remove(idx) {
        this.chartData.datasets.splice(idx, 1)
        this.$refs.chart.update()
      }
    }
  }
</script>

This error doesn't occur when removing last index in datasets. I printed chartData.datasets after splicing datasets array, and then I found that all datasets[]._meta is empty.

If I remove this plugin in the same code, this error doesn't occur. If you have any idea, please comment me

namjeongho avatar Apr 04 '20 07:04 namjeongho