how to display labels for Progress Circle?
Application Type

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? 



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,

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:


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:

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,



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