Charts.js doughnut

Question

I'm using Charts.js Doughnut chart that displays dynamic data which arrives on time intervals.
When I cancel the time intervals calls or reload the page! it looks fine:

enter image description here

When I refresh that with time intervals and go over with mouse it seems that it draw another layer on each call.

enter image description here

I already tried to draw it once and to remove and set the new data, but it still goes crazy on mouse over.

var canvas = document.getElementById('modular-doughnut');
var context = canvas.getContext('2d');
context.clearRect ( 0 , 0 , canvas.width, canvas.height );
var moduleDoughnut = new Chart(context).Doughnut(chart_data, config);

EDIT: Thanks to @Koogle I can say that the problem is in tooltips.

How to solve that?

Because chart.js uses the html-canvas I think you have to clear the canvas before you redraw. — Koogle, Feb 01 '15 at 13:56
I already use context.clearRect ( 0 , 0 , canvas.width, canvas.height ); — NickF, Feb 01 '15 at 14:01
To you do that once when you setup the chart or on mouse over to? — Koogle, Feb 01 '15 at 14:03
I have calls to service every 20 sec, it happens after the second call (the code above repeated) — NickF, Feb 01 '15 at 14:05
Is the problem related to the display of the tooltip? (http://stackoverflow.com/questions/25661197/chart-js-doughnut-show-tooltips-always) — Koogle, Feb 01 '15 at 14:08
Yes, it happens on mouse over for tooltips, but I do whant to see the tooltips — NickF, Feb 01 '15 at 14:23

score 0 · Answer 1 · answered Aug 29 '17 at 18:21

In order to use the same canvas you have to clear the reference(s) to it. Charts.js states that you must use .destroy() to clear all references to the canvas.

You read about it here: Charts.js .destroy()

I had the same issue in some dynamic charts that I made so I found it easier to just create a div around the canvas, clear the div using jquery $("#divID").empty(), and then append the new canvas.

Charts.js doughnut

1 Answers1