Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
namjeongho opened this issue Apr 4, 2020 · 0 comments

Comments

@namjeongho
Copy link

namjeongho commented Apr 4, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant