chartjs-plugin-style
chartjs-plugin-style copied to clipboard
Cannot read property 'data' of undefined - after chartData.datasets.splice()
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