Vue-chartjs: Cannot found the property of undefined

[nkbem]

Expected Behavior

It should work with either of the code

this.data.chart.destroy()
this._data._chart.destroy()
this.$data._chart.destroy()

Actual Behavior

Cannot found the property of undefined

P.S.
"vue-chartjs": {
"version": "3.2.1",

Environment

• vue.js version:
• vue-chart.js version:
• npm version:

[apertureless]

this.$data._chart.destroy() is the way to go.
But you may need to check if this.$data._chart is there.
It gets created after the renderChart() call.

[nkbem]

I am using this code before calling the render function:

  if (this.$data._chart) {
    this.$data._chart.destroy();
  }

Error:
TypeError: Cannot read property 'getContext' of undefined at VueComponent.renderChart (webpack-internal:///./node_modules/vue-chartjs/es/BaseCharts.js:67)

[nkbem]

The error is here!

  renderChart: function renderChart(data, options) {
    this.$data._chart = new __WEBPACK_IMPORTED_MODULE_0_chart_js___default.a(this.$refs.canvas.getContext('2d'), {

I have to destroy the chart before loading the new one.

[apertureless]

Can you please provide a link for reproduction? jsfiddle / codepen?

[nkbem]

Here is the code of the component, I am just emitting an event from another controller.

import { Line } from 'vue-chartjs';

/* eslint no-underscore-dangle: 0 */
export default {
extends: Line,
data() {
return {
labels: [],
data: [],
};
},
mounted() {
this.$eventBus.$on('updateChart', (shareDevelopment, volumeDate) => {
this.labels = volumeDate;
this.data = shareDevelopment;
this.renderLineChart();
});
},
methods: {
renderLineChart() {
if (this.$data._chart) {
this.$data._chart.destroy();
}
this.renderChart({
labels: this.labels,
datasets: [
{
label: 'OS',
backgroundColor: '#FFCD00',
data: this.data,
},
],
}, { responsive: true, maintainAspectRatio: false });
},
},
};

[apertureless]

This looks kind of okay.
Need more context on this.

Do you use single file components? (.vue) files?

If so, keep in mind that you have to remove the template tag, otherwise it will be overwritten.

[nkbem]

[nkbem]

I am using this inside template:

  <div class="chart_shares_development">
    <chart-shares-development :chart-data="outstandingShares">
      {{ this.$i18n.t('message.preliminaryanalytics.labels.chartSharesDevelopment') }}
    </chart-shares-development>
  </div>

[apertureless]

Can you post the full source of your chart component? Or make a fiddle. Its impossible to debug, with only small code snippets.

[gazben]

@nkbem Didyou create an empty template tag? If so, delete it.

[apertureless]

closed due to inactivity.