Topic: Updating Minimalist Chart properties with Typescript in Angular
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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