Chartjs-Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart

by

0👍

With a couple of changes, your code should work

  1. Looks like there is some problem with the Chart.js version you are using. I changed it to the latest version (2.1 @ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js)

  2. Before you do $('#wheel').remove(); you need to do myChart.destroy(); to remove that particular chart from Chart.js’s internal list of objects (which it uses to resize existing charts when the window resizes)

  3. The following bit in your code clears off the complete data. 

    ...
    for(i=chartData.datasets[0].data.length-1; i>=0; i--) {
      chartData.datasets[0].data.splice(i,1);
      chartData.datasets[0].backgroundColor.splice(i,1);
    }
    ...

Since you then user chartData to initialize your chart, you are effectively trying to draw a blank chart. I assume this was some sort of copy-paste error. I’ve changed it in the updated fiddle to just remove the last sector alone, like so. 

var i=chartData.datasets[0].data.length-1;
chartData.datasets[0].data.splice(i,1);
chartData.datasets[0].backgroundColor.splice(i,1);

If you want all the sectors again for the next run, just remove that block.

Fiddle – https://jsfiddle.net/wzbxuo5n/

Leave a comment