[CHARTS] Doughnut and centered percentage


Topic: [CHARTS] Doughnut and centered percentage

Jureyder asked 6 years ago

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.  

Jureyder answered 6 years ago

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.  

Damian Gemza staff answered 6 years ago

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