Graphic overlay

Question

I have a problem when creating a chart with Chart.js and then do to generate another chart from the menu that is on the same page. It creates the graph, but when I move the cursor across the graph it switches to the previous graph.

Update

After a search in the chartJS documentation I found a supposed method that clears the chart information with the .removeData(). I applied this method to the controller, but unfortunately it continues to present the previous graphic in background when I hover the mouse over the graph. I also performed a console.log in the array containing the information and this information is updated with the latest information request envoy.

Controller code

 $scope.getChart = function (report) {
 $scope.modalLabels = [];
 $scope.data = {values: ([])}; //Array that contains the data recieved from the server
 if($('#chartBar')!=null){
    $('#chartBar').removeData();
  }
 /*Funçao para que obtém as informações por parte do servidor*/
 //Se receber informação
  var avgCapacity = [];
 for (var i = 0, length = data.length; i < length; i++) {
  avgCapacity.push(data[i].Volume);
  $scope.modalLabels.push(data[i].Day + "/" + data[i].Month);
        }
  $scope.data.values = ([avgCapacity]);

First graph Second graph Html that generates Graphics:

<div ng-hide="data==0">
    <h4 id="chartTitle"><b>{{Title}}</b></h4>
 <canvas id="bar" class="chart chart-bar" chart-data="data" chart-options="options"
    chart-labels="modalLabels" chart-legend="true" chart-series="series">

Answer 1

I went through the same problem.

The solution was that when exchanging the data I removed the canvas from the DOM and inserted a new canvas with the new values.

Then I created a directive that encapsulated the directives of angular-chartjs and added two methods to the object passed to her, the create() and clear().

Ex:

<my-charts chart-model="vm.chart"></my-charts>

So this directive was about creating and compiling all the html by adding the values of the object vm.chart and giving him the create() and clear().

Then when I needed to upgrade Chart I would make one clear(), updated the data and gave a create().

I did it in my old job and unfortunately I no longer have access to the code.