Overlaping labels in Pie Charts

[Jordi]

Hi;

 

Is there a way to indicate the piechart to take into consideration the label font size to avoid having overlap between labels as in this example: 

http://jsfiddle.net/jordidebarcelona/fegf4zp5/1/ ?

 

It seems that labels spacing is calculated asuming some fixed font size, but when a larger font size (for example 16px) is used, there is overlapping even when there is enught space to avoid it.

 

Thanks for your help,

 

       Jordi

 

 

[Prerana]

Hello Jordi,

 

Thanks for the query.

 

At present the labels of pie chart avoid overlapping for the default font size. 

 

And yes there is a room for the improvement. We are looking into this.

 

Meanwhile, for a workaround we can skip labels that are overlapping , by using smart labels.

We use smart labels by setting the attribute "enableSmartLabels"  as "1" and then to skip the overlapped labels,

set "skipOverlapLabels" attribute as "1", and   If not, they might overlap if there are too many labels.

Kindly refer the fiddle below for the implementation.

http://jsfiddle.net/Prerana/fegf4zp5/4/

 

Hope this helps,

Thanks

[Jordi]

Thanks for your quick answer, Prerana.

 

skipOverlapLabels helps, but it isn't enough for having nice looking charts with Pie Charts with labels at 14px or 16px. If tried other attributes, such as "labelBorderPadding" or "labelBorderThickness" with the objective of increasing the distance between labels, but these attributes don't seem to work with Pie Chart legends.

 

So at the end, I've got the best charts by using a smaller label font size.

 

Please, let us know when there are improvements in this area.

 

Best regards,

 

       Jordi

[Prerana]

Hello Jordi,

 

Thanks for replying back. 

 

The attribute "labelBorderPadding" and  "labelBorderThickness" are working as expected from our end.

 

The attribute "labelBorderPadding"  is used to set a padding in between the labels and the edges of the its own borders. 

 

The attribute  "labelBorderThickness" is used to set the thickness of the borders.

 

And yes there is a room for the improvement with the font size. We are looking into this, and will keep you posted.

 

Kindly refer the fiddle below for the implementation.

http://jsfiddle.net/Prerana/fegf4zp5/6/

 

Hope this helps,

Thanks,

[Prerana]

Hello,

 

Glad to inform you that the issue has been resolved in our current version i.e. FusionCharts Suite v3.11.3.

 

Kindly refer the fiddle below for the implementation.

http://jsfiddle.net/Prerana/fegf4zp5/8/

 

Hope this helps,

[Amit Rohra]

Hi,
Facing the same issue of overlapping, above mentioned jsfiddle is giving 404, can you please share the working code/attributes?

[Akash Biswas]

Hi Amit,

 

FusionCharts supports the feature to skip overlapping labels in a Pie or Doughnut chart, when there are too many labels in the pie/doughnut chart. Please refer to the below documentation link :

https://www.fusioncharts.com/dev/chart-guide/standard-charts/pie-and-doughnut-charts#skip-overlap-labels-12

 

If you still face the problem, please share a sample fiddle with your chart dataSource where you are facing the issue. We would check the sample and suggest you with a solution.

 

Thanks,

Akash.