title: angular 5 reset chart js bar in same component
body: <p>i have component to show detail of my products i used a horizontalBar chart in component but when i view other product it keeps pervious chars bar and new bar will append to it . i tried to null chart bar values and also i deleted artingArr but it not working how can i reset the chart and redraw it when product data changed?</p>
  
  <p>my chart is like this :
  in ngAfterinit():</p>
  
  <pre><code>    for (let rate of this.product.product_ratings) {
        this.sum += rate.rating;
        this.ratingArr.push(rate.rating);
        let n = this.product.product_ratings.length;
        let nn = this.sum / n;
        this.product.peopleCount = n;
        this.product.between = Math.round(nn * 10) / 10;
      }
  
  
     new Chart(&lt;HTMLCanvasElement&gt;document.getElementById("user-rev-chart"), {
        type: 'horizontalBar',
        data: {
          labels: ["5 star", "4 star", "3 star", "2 star", "1 star"],
          datasets: [
            {
              fill: true,
              label: false,
              backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
              data: [this.fivestar, this.fourstar, this.threestar, this.twostar, this.onestar]
            }
          ]
        },
        options: {
          maintainAspectRatio: false,
          responsive: false,
          legend: {display: false},
          title: {
            display: false,
            text: ''
          },
          scales:
            {
              yAxes: [{
                // barPercentage: 0.4,
                barThickness: 20,
                barPercentage: .5,
                categoryPercentage: .2,
                isFixedWidth: true,
                //Number - Pixel width of the bar
                barWidth: 20,
                gridLines: {
                  display: false
                },
                ticks: {
                  min: 0,
                  stepSize: 1,
                  fixedStepSize: 1,
                }
              }],
              xAxes: [{
                display: false,
                gridLines: {
                  display: false
                },
                ticks: {
                  min: 0,
                  stepSize: 1,
                  fixedStepSize: 1,
                }
              }],
            }
        }
      });
  </code></pre>
  
  <p>ngInit():</p>
  
  <pre><code>  ngOnInit() {
  
      if (this.isActive() &amp;&amp; this.auth.isAuthenticated()) {
        this.changeCaptcha();
      }
      this.all = null;
      this.cur = null;
      this.onestar = null;
      this.twostar = null;
      this.threestar = null;
      this.fourstar = null;
      this.fivestar = null;
      this.ratingArr = [];
  
  
    }
  </code></pre>