Pie Chart Chart Size and Label Position in side Pie

[Imran Javed]

We would like to adjust following things in Pie Chart in our React Application:

• We want to show Labels inside Pie instead of in Chart space area with anchors.
• Increase Pie Size in the chart and to reduce the extra space all around. We tried to use Padding and Margin properties, but they work only up to some level.

It will be great if we can find if it is possible to achieve these in fusion charts.

[Akash Biswas]

Hi Imran,

 

- The labels/values of the pie slices cannot be displayed on the slices, as it is not supported. Since it might result in overlapping or going out of the slices in case of long labels, so this is natively not supported.

- You can explicitly set the pie chart radius using the supported configuration attribute "pieRadius" and set the value in pixels. Please refer to the documentation link : https://www.fusioncharts.com/dev/chart-guide/standard-charts/pie-and-doughnut-charts#customize-pie-radius

 

As a work-around you can set the pieRadius to set a large Pie chart, then you can hide the labels, values and legends by setting the attributes showLabels, showValues and showLegend to "0" respectively.

To display the label and values on the pie slices, you can use Text annotation feature to display any text on the chart by specifying the "x" and "y" attributes of the annotations object. Documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/annotations/creating-annotations/create-text-annotations

Also find a sample fiddle implementing the above technique : http://jsfiddle.net/7j2hkLtr/2/

Please note : Annotations are static in nature.

 

Thanks,

Akash.

[Imran Javed]

Hi Akash,

 

Thanks a lot for information and it is going to be very helpful. I would also need few more details:

• Will it be practical to add Labels in Pie using annotation as we may not be able to find out start and end of related pie slot in case of dynamic data?
• Is there any way to have pieRadius in percentage so we can control it in responsive application?

Thanks and Regards,

Imran

[Akash Biswas]

Hi Imran,

 

- Text annotations are static components(custom text) on the chart. It could be placed anywhere on the chart by specifying the "x" and "y" attribute pixel values. So, to place them on top of the pie slices, you need to provide the x and y values according to your pie data.

- The radius of the Pie cannot be provided in percentage. If you are setting "pieRadius", that means you are setting the radius in pixels explicitly and it would not be responsive. However, if you do not set the explicit radius, the pie would be responsive.

 

Please note : As per the space management feature, if you hide the default pie labels and values(that appears outside the pie), then the pie dimension increases even without setting the "pieRadius". Also it would be responsive.

 

Thanks,

Akash.