Topic: Updating Minimalist Chart properties with Typescript in Angular

rtchrisdev pro asked 6 years ago


I cannot see in the Minimalist Chart documentation how to update the chart properties like [percent] with typescript.  https://mdbootstrap.com/docs/angular/advanced/charts/

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 6 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:

.html:

<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>

.ts:

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

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: 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