Chart.js: Tooltip causing reverting to old chart when rendering different charts in same canvas

[brenthamby]

If I render one bar chart with certain data then render a different chart with (new Bar Chart Obj), but use the same canvas, when I mouse over the new chart to show the tooltip - it will revert back to the old chart!!

I even tried to call clear on the Obj reference and also tried clearing the canvas manually - no luck.

Insights?

[aman19161]

I am also having the same issue, when I use the same canvas to draw chart second time, then on hover it shows the previous chart. How to solve this?

[brenthamby]

My solution was to just create different canvases to use with the different refreshes - it is a hack, but it fixed the issue. I had 5 different charts, so I made 5 different canvases, and did the hide/show toggle kind of thing.

[JoabMendes]

Try to create a global chart instance and before update it, use .destroy() to clear the old chart instances. This is happening because you're creating new instances over the same canvas and then the old points in the chat call their tooltip function what causes the old charts to show up.

I did this in my chart to solve this problem:

...
if($scope.myLineChart !== undefined || $scope.myLineChart !== null){
            $scope.myLineChart.destroy();
}
...

[aman19161]

Thank you @JoabMendes , it works :)

[JoabMendes]

@brenthamby it will make your view very heavy and you got more work to do. Try to see the solution I gave here :smile:

[jobsamuel]

Thanks a lot @JoabMendes! Man, you saved my week! :tada:

Honesly, I'm almost give up. I've had this issue for awhile but I couldn't figure it out why it was happening :pensive:

Regards!

[JoabMendes]

You are welcome @jobsamuel! :smiley:

[rafaelcastrocouto]

Thx solved my problem!!!

[RobClenshaw]

I have just experienced the same issue. Debugging it looked really scary, but your solution worked like a charm. Thanks for saving me a lot of time!

[ifokeev]

@JoabMendes, It doesn't work for me, but I found the solution:

$timeout(function() {
...         
}, 200);

I think it's because ChartJS can't finish chart.clear() to clear the canvas, so old data appears.
Just add delay.

[JoabMendes]

It depends on you implementation @ifokeev , if you have any way to make the chart a global instance you can destroy the previous rendering before create a new one, in the same canvas.

[zurez]

I am also having the same issue.

[jeetu3indra]

@JoabMendes, can you please explain a bit more on how to create a global chart instance? Tried a couple of things but did not work.

[JoabMendes]

@jeetu3indra @zurez
I was using AngularJS with my chart. So I could add global instances to my app by
$scope.myLineChart = new Chart(ctx).Line() (Add to my scope a Chart.js instance).

However, if you are using pure javascript as I think you are:
From this example in the documentation you can use window.myLine = new Chart(ctx).Line() where you would make the chart a global instance in the DOM (window).

If you use window to create a global object, I believe you don't even need to use the destroy like I did, in order to avoid the overlap. Since the replace of the object deletes the old version in the DOM.
But if it doesnt happen, just do like I did using window in the beginning of your update function :

...
if(window.myLineChart !== undefined || window.myLineChart !== null){
            window.myLineChart.destroy();
}
...

I hope it can help you. :smile:

[ctbolton]

@JoabMendes any chance you'd be able to post up a complete JSBin example with the fix you described. I can't seem to get mine working properly. Would greatly appreciate it.

[zurez]

@JoabMendes : Thanks , but there is a problem with destroying chart manually. If using the same canvas, the chart is not recreated automatically if new data is parsed after manual chart destruction.
P.S: your method works though with a little modification. :+1:

[zurez]

Also the timeout fix worked for me . thanks @ifokeev :+1:

[firnasz]

Thanks @JoabMendes. I created global object like below on top.

var chartObj; 

Then just before initializing the chart i destroyed as follows.

if (chartObj != undefined || chartObj != null) {
    chartObj.destroy();
}

[JoabMendes]

Yeah @zurez , it depends of how you are using and also the way you need it.
I will try to find a free time and try to code one for you @ctbolton , hold on. :wink:

[ctbolton]

Appreciate it @JoabMendes . Looking forward to it ;)

[etimberg]

Closing since the correct fix is to use destroy()

[Momischmiddi]

@JoabMendes thank you very much, works great👍

[daniddb]

It renders a really low resolution chart after I destroy the data with chart.destroy()
Any ideas?

[rajeshwarpatlolla]

Hope this might help you https://stackoverflow.com/a/48508231/4337125

[RajRawat02]

Hi,
I facing issue after destroying canvas object and creating again on same still old data is showing

[RajRawat02]

Angularjs