Fix Multiple Chart Issue in Chart.js
This multiple chart issue usually happens when you hover the mouse to a coordinate that already contains existing data that was just replaced by another data returned from an asynchronous request.
The Workaround
Suppose you have an instance of a pie chart for example:
new Chart(context).Pie(data);
Assign that instance to a variable and specify that variable as a property of the window
object like so:
window.pieChart = new Chart(context).Pie(data);
Afterwards, add an if
condition before it that checks if window.pieChart
already exists and if so, remove it like so:
if (window.pieChart !== undefined) {
window.pieChart.destroy();
}
window.pieChart = new Chart(context).Pie(data);
Written on June 10, 2019