How to destroy chart before re-rendering?

Expected Behavior

I have a chart that can be rendered multiple times, for example as we change filter criteria.

Actual Behavior

When I do this, it seems like all the charts “stack up” underneath each other. This is very obvious when I move the mouse over the charts. The various charts that I’ve seen pop in and out as I drag the mouse over the chart.

What I’ve Done

I’m using this.renderChart(data, options) to render each time the filter changes. Based upon information I’ve found through web searches, I tried usingthis._chart.destroy() before calling renderChart() but that produces a browser console error saying destroy() doesn’t exist.

Environment

• vue.js version: 2.4.4
• vue-chart.js vsion: 3.0.0
• npm version: 5.3.0

[thc1967]

Sometimes _chart doesn’t exist yet, so using code like this seems to work:

render: function () {
    if (this.$data._chart) {
        this.$data._chart.destroy();
    }
    this.renderChart({...

[apertureless]

You can only access it inside your Chart component.