Show percentage circle.

[John Chen]

Hi,

I want to have a control that can show a circle of percentage. Like below 65% in the middle and partially colored donut for visual.

I am not sure what control to use. It seems to be I may able to achieve this use a donut pie chart. or maybe a Circular Gauge control.

Please advise.

Thanks,

John

[Durga Gopalakrishnan]

Hi John, 

We suggest you to use donut chart by specifying innerRadius to display slices and annotation to display the center text. We have prepared sample based on your requirement. Please check with the below snippet and sample. 

<ejs-accumulationchart :annotations='annotations'> 

       <e-accumulation-series-collection> 

              <e-accumulation-series :pointColorMapping=' pointColorMapping' radius='60%' startAngle=180     endAngle=180 innerRadius='80%' > </e-accumulation-series>              

         </e-accumulation-series-collection> 

</ejs-accumulationchart> 

 

annotations:[{ 

        content:'<div id="annotation1" style="font-size:30px">65</div>', 

        region: 'Series', 

        coordinateUnits: 'Pixel', 

        x: '50%', 

        y: '50%' 

    }], 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Donut658201048.zip 

UG : 

https://ej2.syncfusion.com/vue/documentation/accumulation-chart/pie-dough-nut/#color--text-mapping 

https://ej2.syncfusion.com/vue/documentation/accumulation-chart/annotation/ 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[John Chen]

Hi Durga,

Using donut pie chart with annotation works for me. 

However, I want add a title to the right of the chart. like in the below image.

I cannot find an easy way to do this. Any suggestion greatly appreciated.

Thanks,

john

[Durga Gopalakrishnan]

Hi John,

You can use annotations to display the custom text in required location by using x and y coordinates. We have attached modified sample for your reference. Please check with the below snippet and screenshot.

annotations:[

              //…

              {

                            content:'<div id="annotation2" style="font-size:30px">Delivery</div>',

                            region: 'Chart',

                            coordinateUnits: 'Pixel',

                            x: '68%',

                            y: '50%'

              }

],

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Annotation2012406572.zip

Please let us know if you have any concerns.

Regards,

Durga G

[John Chen]

Oh, the annotations is an array. I was stuck on one annotation.

Thank you so much.

John

[Durga Gopalakrishnan]

Hi John,

Yes, annotations are array of objects. You can include required number of annotations based on your need. Pease get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Durga G