Customizing ProgressCircle and Graphs
Question
Application Type
Mobile

Hi,

I am struggling with customizing the Graphs and ProgressCircles in my App.

Can someone please help me how to learn the Extended Classes that i can use to customize these .

Currently, i am not able to reduce the size of text inside the ProgressCircle. I think this can be done using an Extended Class, but i dont know where i can find these properties. I did few research but still no hope

Can some one tell me how to adjust the text size inside this Progress Circle. And also some references where i can see more properties that can be used to alter the basic Style of these widgets

mvp_badge
MVP

Hi Learn It,


You can use Chrome Developer Tools by right clicking the page and selecting the option Inspect (or use the F12 shortcut) and open the tab Elements so you can inspect the HTML.

With that, you'll be able to see which classes the elements of the Progress Circle have so you can know which classes to adjust, like on the image below:


As for the size of the text, using the above strategy, I was able to identify the right class and apply the font-size CSS property to my style sheet for my progress circle with Extended class my-progress-circle:


Take a look at the OML in attachment with the example. It is reactive but it is the same exact behavior for a Mobile application.


Kind Regards,
João

ReactiveProgressCircle.oml

Hi Joao,

This worked perfectly for me in Chrome. But when i tested it in my mobile, it is still coming up as large font. Could it be restricted to Web browser only?

mvp_badge
MVP

Hi Learn It,


I also tested in a Mobile app and it works for me.

The Mobile OML in attachment with the exact same thing I had done for Reactive.

MobileProgressCircle.oml

Hi Joao,

I tested this in two different phones and one phone it displayed at size 10px and the other still in the bigger size. Not sure what issue this is. I even followed your approach and still same issue


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.