Jordi

Overlaping labels in Pie Charts

Recommended Posts

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

 

 

post-68692-0-43409600-1473925761_thumb.jpg

Share this post


Link to post
Share on other sites
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.

 
Hope this helps,
Thanks

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.
 
Hope this helps,
Thanks,

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now