CODEWITHSUNDEEP
javascriptangularjshtml5-canvaschart.js
Miguel Péres
Miguel Péres

Reputation: 640

Chartjs 2.x - Dataset color changing when redrawing chart

here's the issue: I'm drawing a chart using external data (a .txt file that the user upload with datasets information). But if the user mistakenly upload the wrong file, he should be able to upload another file, thus redrawing the charts.

Here's what happen with the chart rendering when I upload multiple files, one after another:

Example of what they looks like: https://i.sstatic.net/EqPjy.jpg

Each time a draw the chart again, the background color gets darker. Every time a user upload a file I do the following:

  1. do a chart.destroy() and a chart.clear()
  2. Remove used canvas and use a new one for the new chart

Is this a known issue? Anyone have any clue of what might be happening?

Upvotes: 0

Views: 328

Answers (1)

Miguel Péres
Miguel Péres

Reputation: 640

I tried a lot of things regarding cleaning the canvas and the chart instances, but ended up taking another approach (and probably a better one). Instead of removing the chart (and its canvas) and creating a new one, I updated the chart's data (replacing the old dataset for the new one).

for(var i = 0; i < $scope.chartsList.length; i++) {
  var chart          = $scope.chartsList[i];
  var firstDataSet   = $scope.formattedData[i];
  var secondDataSet  = $scope.formattedData[i + 15];                

  for(var j = 0; j < 51; j++) {
    chart.config.data.datasets[0].data = firstDataSet;
    chart.config.data.datasets[1].data = secondDataSet;

    chart.update();
  }

Done!

Upvotes: 1

Related Questions