0

I have a problem with my first ionic web app. I should do some charts so I decided to use d3.js and tree.js. I added the possibility to visualize my data with different type of chart. The problem appears when I draw in the same canvas different charts so I suppose that I have to clear the canvas before each update. This is my code:

// Some operations

var canvas = this.components.toArray()[idItem].nativeElement;

this.barChart = new Chart(canvas, {

  type: type,
  data: {
          labels: keys,
          datasets: [{
                      label: label,
                      data: values,
                      backgroundColor: 'rgba(255, 99, 132, 0.2)',
                      borderColor: 'rgba(255,99,132,1)',
                      borderWidth: 1
                    }]
        },
  options: {
            scales: {
                      yAxes:  [{
                                ticks: {
                                        beginAtZero:true
                                        }
                              }]
                    }
            }
  });

Searching on the web (How to clear the canvas for redrawing) I tried to add these lines:

var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

but I still have the problem.

Demonstration of my problem

Can you help me? Thanks.

Fabiano Ammirata
  • 13
  • 5

1 Answers1

0

You may need to use the official d3.js API to clear a chart. It's violent to clear canvas by web api, and may cause the problem.

Isaac Lex
  • 1
  • 1