Topic: Updating Minimalist Chart properties with Typescript in Angular

rtchrisdev pro asked 5 years ago

I cannot see in the Minimalist Chart documentation how to update the chart properties like [percent] with typescript.

I have imported the ChartSimple and Charts Modules. I would like to update the [percent] property in increments similar to how it is documented in the "Updating Chart data" in the documentation. Thank you. Chris

Damian Gemza staff answered 5 years ago

Dear @rtchrisdev 

Updating minimalistic chart percent value is super easy. Just use property-binding to bind [percent] with some variable, like [percent]="percentValue", and then in typescript code update this value.

Please take a look at my below code:


<mdb-simple-chart [percent]="percentValue" barColor="ef1e25" trackColor="f2f2f2" scaleColor="303030" scaleLength="1" lineCap="round" lineWidth="5"
trackWidth="10" size="110" rotate="0" [animate]="{duration: 1000, enabled: true}"> </mdb-simple-chart>
<button mdbBtn color="primary" (click)="randomPercentValue()">Change value</button>


percentValue: number = 90;
randomPercentValue() {
this.percentValue = Math.round(Math.random() * 100);

Best Regards,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: MacBook Air
  • Browser: Chrome
  • OS: Mac OS / Node JS
  • Provided sample code: No
  • Provided link: No