Skip to Content (Press Enter)
UserImage.jpg
Lucas Nguyen
543Views
6Comments
Solved
How can I create a Donut Chart with the total value in the center of the chart?
Question
Mobile
Charts
Application Type
Mobile
Service Studio Version
11.11.2 (Build 43109)

Hi, I was wondering if it is possible to create a donut chart where the sum of the rings around it will be displayed in the middle of the chart.

Something like this:

I have been looking around Highcharts but am not able to find something that is close to or similar to this on there for me to base my own chart on. 

So is there a way for me to do this? 

Cheers!

0
0
14 Jul 2021
Copy Link
2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello Lucas, 

I want to add one more information in the marcio statement, as your requirement pass the sum of value 

then you should take one local variable, pass the sum of your list values in that 

As above image pass that local variable (' "+TotalValue+"%' )  in the highcharts json in the property of dount chart

Hope this will also helps you.


Thanks and Regards,

Akshay Deshpande

See solution in context
2
0
14 Jul 2021
Copy Link
2021-06-02 20-50-04
Márcio Carvalho

Thank you, Akshay! Probably Lucas would need that in case he didn't know :)

Kind regards,

Márcio

1
0
14 Jul 2021
Copy Link
UserImage.jpg
Lucas Nguyen

Hi Marcio and Akshay,  apologies for not replying earlier. 

Thank you so much! It works very well :)

Regards, 

Lucas

0
0
17 Jul 2021
Copy Link
2021-06-02 20-50-04
Márcio Carvalho

Akshay helped too with giving the solution to pass the variable to advanced format and display what you want. Logically from my point of view, I think Akshay's answer should be marked too, as you can do it. No hard feelings :D Is just to get this thread even better. Community members who pass by can see how to deal with this "problem" in a better way :)

Thank you!! Kind Regards,

Márcio

0
0
17 Jul 2021
Copy Link
2021-06-02 20-50-04
Márcio Carvalho
Solution

Hi Lucas, I have come with this

You can use the below JSON:

"{
title: {
        text: '80%',
        align: 'center',
        verticalAlign: 'middle',
        style: {
            fontWeight: 'bold',
            fontSize: 30
        }
    }
}"

in here:

For more info, here the document about charts HightChartsAPI

 

donutchart.oml
0
0
14 Jul 2021
Copy Link
2024-01-31 05-29-41
Akshay Deshpande
Solution

Hello Lucas, 

I want to add one more information in the marcio statement, as your requirement pass the sum of value 

then you should take one local variable, pass the sum of your list values in that 

As above image pass that local variable (' "+TotalValue+"%' )  in the highcharts json in the property of dount chart

Hope this will also helps you.


Thanks and Regards,

Akshay Deshpande

2
0
14 Jul 2021
Copy Link
2021-06-02 20-50-04
Márcio Carvalho

Thank you, Akshay! Probably Lucas would need that in case he didn't know :)

Kind regards,

Márcio

1
0
14 Jul 2021
Copy Link
UserImage.jpg
Lucas Nguyen

Hi Marcio and Akshay,  apologies for not replying earlier. 

Thank you so much! It works very well :)

Regards, 

Lucas

0
0
17 Jul 2021
Copy Link
2021-06-02 20-50-04
Márcio Carvalho

Akshay helped too with giving the solution to pass the variable to advanced format and display what you want. Logically from my point of view, I think Akshay's answer should be marked too, as you can do it. No hard feelings :D Is just to get this thread even better. Community members who pass by can see how to deal with this "problem" in a better way :)

Thank you!! Kind Regards,

Márcio

0
0
17 Jul 2021
Copy Link
2021-06-02 20-50-04
Márcio Carvalho

Any updates Lucas? :)

Kind regards,

Márcio

0
0
14 Jul 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.