How can I create a Donut Chart with the total value in the center of the chart?
Question
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!

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

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

Kind regards,

Márcio

Hi Marcio and Akshay,  apologies for not replying earlier. 

Thank you so much! It works very well :)

Regards, 

Lucas

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

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

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

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

Kind regards,

Márcio

Hi Marcio and Akshay,  apologies for not replying earlier. 

Thank you so much! It works very well :)

Regards, 

Lucas

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

Any updates Lucas? :)

Kind regards,

Márcio

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