180
Views
17
Comments
Solved
value to be display in center in donut chart
Question
Application Type
Reactive

Hello everyone,


Im developing reactive web app, donutcharts.

i want to display value in the center but im unable to display.

 im attaching images here.


Im using this style code.


can anyone help me here to display value at center pls.


Regards.

2022-12-09 04-50-17
Shubham Doshi
Solution

Hello Leo,

Make the below changes, it would reflect as expected. I guess its happening because of the color labels. Kindly change as the property as shown below and let me know if it works:

UserImage.jpg
Accelance Partners

Hi @Leo thomas ,
You can use the JSON for this. Check this discussion link, this is same as your question. Hope it helps.

Thanks,

Rakhi

UserImage.jpg
Leo thomas

Hi Thanks for the response im using json but still its not working..


2022-12-09 04-50-17
Shubham Doshi

Hello Leo thomas,

The JSON you have added seems to be correct. However, check if blank value is preceding the actual count. Or you can try  adjusting the vertical alignment. 

UserImage.jpg
Leo thomas

Hi Shubam ,

yes  i need adjust vertical alignment.

im trying with bottom, top, but position going out of graph.

can u suggest how to adjust vertcal alaignment


Regards.

2022-12-09 04-50-17
Shubham Doshi

Have you tried removing the vertical alignment?

UserImage.jpg
Leo thomas

yes i tried by removing vertical alignment also.

2022-12-09 04-50-17
Shubham Doshi

Hello Leo,

Then try adjusting vertical alignment in percentage as per your convenience as shown below:


You can adjust the percentage as per your need. Let me know if this helps

2025-04-17 05-42-16
Ajit Kurane

Hi Leo,

Try below CSS and let us know,

"{ title: 

{       

 text: ' "+GetRequestDetailsDaily.Count+" ',        

text-align: 'center',        

verticalAlign: 'middle',        

style: {            

fontWeight: 'bold',           

 fontSize: 32

color: '#1D1D1B'

 }    

}

}"


Thanks,

Ajit Kurane.

UserImage.jpg
Leo thomas

Hi Ajit,

with ur code getting this error:

can u suggest me here.

Regards.

2025-04-17 05-42-16
Ajit Kurane

You can try now,

"{ title: 

{       

 text: ' "+GetRequestDetailsDaily.Count+" ',        

align: 'center',        

verticalAlign: 'middle',        

style: {            

fontWeight: 'bold',           

 fontSize: 32

 }    

}

}"

UserImage.jpg
Leo thomas

Hi Ajith,

thanks for the response,

This is same code but style is different but still value is not showing in the middle with ur code.

can suggest me here.


Regards.

2022-12-09 04-50-17
Shubham Doshi
Solution

Hello Leo,

Make the below changes, it would reflect as expected. I guess its happening because of the color labels. Kindly change as the property as shown below and let me know if it works:

2022-12-09 04-50-17
Shubham Doshi

Without color labels in bottom:


With color labels in bottom:

You can see the difference.

UserImage.jpg
Leo thomas
2022-12-09 04-50-17
Shubham Doshi
UserImage.jpg
Leo thomas

is there any posiibitlity , so that we get labels bottom and  value center


2022-12-09 04-50-17
Shubham Doshi

I am not sure about that. What I understand is that, 'verticalAlign' trying to align the text in middle while taking in consideration of the donut chart and color labels as well. Hence appearing slightly downwards.

If you find the solution, do post it here. 

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