Topic: [CHARTS] Doughnut and centered percentage
Good morning,
We are using MDBoostrap since few days, especially for charts.
Specifically, we need to implement a percentage or a number in the empty space of the doughnut chart in the center, for further information.
For example : A doughnut is filled with 80% with the green color, 20% with the red one. We need to display "80%" in the center of the doughnut.
How can we achieve this? Is there a native function, variable, input, we can use to do it?
I wish you a good day.
Add comment
Good morning Damian,
Thank you for this optimistic answer, I hope to see this feature come later in MDBoostrap.
Anyway, we used an alternative way to do with some CSS styling :
- HTML : Including the chart element into a parent relative (position) div next to another child absolute (position) div containing the percentage value.
- CSS : Apply some CSS styling on the child absolute (position) div : padding-top + padding-left + font-size. (For font-size, do not use px unit, but vw unit to prevent the responsive changes.)
It's an acceptable temporary solution, waiting for the feature to be implemented.
Dear Jureyder,
Thanks for your report! The behavior which you're describing is quite nice. I'll add this to our features list, and we'll implement such behavior in the future.
But for now, there's no possibility to do that.
Best Regards,
Damian
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: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: Personal Computer
- Browser: Google Chrome
- OS: Windows 7 Enterprise SP1
- Provided sample code: No
- Provided link: No