how to display labels for Progress Circle?
Question
Application Type
Reactive

Hi All,

I want to show Labels for "Progress Circle" widget with read line. Like Below : 


Can we move PQR and ABC label with line wherever it finds dark and gray color? 

thanks

mvp_badge
MVP

Hi Khris,


You don't have a label in a Progress Circle because, due to it's nature, you only have two possible values - the complete and incomplete - and the percentage in the middle for the complete value.

If you feel the need to have a label, is it possible that you would actually not want to display progress but a distribution of values of a universe? If that's the case, my advise would be to use a Pie Chart, which you also can tweak its look-and-feel to make it closer to what you need.


Kind Regards,
João

Hi João ,

thanks for reply. Can't use Pie Chart now this is the approved requirement. 

I applied CSS to Expression and using margin property I can able to adjust it.

Now problem is showing RED LINE and moving text according to value.


Hi Kris,

The challenge has to add the labels, because OS dont have an easy way to do it, I have added with JS.

You can see here:

https://personal-xchr.outsystemscloud.com/Tests/ProgressCircleWithLabels?_ts=637626274398249050

BUGS:

1) The "red line" dont have the position as you design;

2) The center of the progress is also part of the element, therefore clickable;

3) Some issues on mouseover and mouseout.

I will build a component that will do a circular progress just with CSS, that way it will be easier to add labels:

https://personal-xchr.outsystemscloud.com/Tests/ProgressCircleWithLabelsCSS

Hope my approach helps.

Best Regards,

Nuno R

Hi Nuno,

Please share your oml


Hi Kris,

Find the OML in attach.

Hope it helps.

Best Regards,

NunoR

ProgressCircleWithLabels.oml

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