Dynamically update mdb-simple-chart data

Dear @Dharmendra Prasad

I have tried to reproduce your problem, but without success - I'm able to change dynamically value of mdb-simple-chart component.

Please take a look at the below code:

.html:

<div class="text-center">
        <mdb-simple-chart [percent]="percent" [barColor]="'4CAF50'" [animate]="{duration: 1000, enabled: true}"></mdb-simple-chart>
        <h5>
          <mdb-badge color="green">Sales <mdb-icon fas icon="arrow-circle-up"></mdb-icon></mdb-badge>
        </h5>
      </div>

.ts:

percent = 56;

  ngAfterViewInit() {
    setTimeout(() => {
      this.percent = 20;
      console.log('first change');
      setTimeout(() => {
        this.percent = 70;
        console.log('second change');
      }, 4000);
    }, 3000);
  }

Could you please check, if your console throws you any errors? Also, the code of your not working example would be helpful too.

Best Regards,

Damian

Thanks for the response! I realized that the thing works partially. Somehow my percent value was subjected to change based on a Subject. The first time the page loads, it didn't really change the chart.

I realize that in the component, I need to initialize the value of percent to some number. I cant leave it undefined. After I changed declared the value and assigned it to 0. Everything works as expected.

Dear @Dharmendra Prasad

You can change the font size and font color of the text inside the chart canvas by using css rules.

Please add the below code to the component stylesheet:

.percent {
  color: red;
}

There's no possibility to put there HTML string, so there's no possibility to style the text there like on your picture.

Best Regards,

Damian