Vue-chartjs: How to destroy chart before re-rendering?

[thc1967]

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

[apertureless]

With vue-chartjs version 3 you can access the chart instance with

this.$data._chart

And then call the destroy() method. Like mentioned in the docs.

[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]

Yep, because _chart is null on init and in renderChart() the chart instance get assigned to it.

[arliber]

Thanks, this works perfectly but I can't understand why is it necessary - shouldn't renderChart do that already?
If I need to destroy the chart every time before a render happens - what is the point of it?

[apertureless]

Well it could.
However the normal use-case is that you call renderChart only once.
If you want to update the data, you can call this.$data._chart.update() which performs an update of the chart, with animations, without re-rendering the whole chart.

But feel free to submit a PR :)

[ghost]

Hi,
I'm a total amateur using chartjs but I'm facing the same issue as thc1967.
Could you please describe further what you're meaning with

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

In my case, I have two functions: One for drawing the chart, one for setting up the filter area. I don't have access to the chartjs chart in the filter function, right?

[urvi2429]

i want to access instance of vue-chart js.
I tried this.$data._chart but i am not getting it

[apertureless]

You can only access it inside your Chart component.

[jwloqwe]

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({...

Hi, a total amateur here, as stated in the vue-chartjs docs, i have placed the 'this.renderChart' in mounted inside my chart component vue file. Does that render: function (){...} goes inside mounted?