Chartjs-ChartJS showing old values when mouse over on Doughnut after updating values

by

2👍

✅

This is because, you are creating a new instance of chart on update button click, and the old one never gets removed.

So, to make the doughnut chart show updated values properly on mouse-over, you need to destroy the previous instance of chart, when the update button is clicked.

To accomplish so …

First, store the chart instance to a variable, as such :

var pieChart_instance = pieChart.Doughnut(pieData, pieOptions);

Then, on update button click, destroy it, before creating a new instance :

$('#updateButton').click(function() {
    pieChart_instance.destroy();
    ...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var pieData = [{
   value: 300,
   color: "#F7464A",
   highlight: "#FF5A5E",
   label: "Red"
}, {
   value: 50,
   color: "#46BFBD",
   highlight: "#5AD3D1",
   label: "Green"
}];

var pieOptions = {
   segmentShowStroke: true,
   segmentStrokeColor: "#fff",
   segmentStrokeWidth: 2,
   percentageInnerCutout: 50,
   animationSteps: 100,
   animationEasing: "easeOutBounce",
   animateRotate: true,
   animateScale: false,
   responsive: true,
   maintainAspectRatio: true,

};


var pie_ctx = document.getElementById("pie-chart-area").getContext("2d");

var pieChart = new Chart(pie_ctx);

var pieChart_instance = pieChart.Doughnut(pieData, pieOptions);


$('#updateButton').click(function() {
	pieChart_instance.destroy(); //destroy previous instance of chart
   
   pieData = [{
      value: 100,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
   }, {
      value: 150,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
   }];
   
   pieChart_instance = pieChart.Doughnut(pieData, pieOptions);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<input type="button" id="updateButton" value="Update Values" />
<div style="width: 300px;">
   <canvas id="pie-chart-area" width="300" height="300" />
</div>
<div id="legend"></div>

Leave a comment