Doughnut chart sliced piece is overlapping the other

[veeramani.arthanari]

Hi,

Sliced piece of doughnut graph is overlapping other values. You can see expanded Equity slice is overlapping on the Alternative Strategies.

Could you please provide any solution for this.? Attached the image.

 

Thanks in advance.

[Akash Biswas]

Hi,

 

We are not getting such issue with the Doughnut chart, please check the below sample fiddle :

https://jsfiddle.net/5jpg4cuf/

Kindly, replicate the issue that you are facing and share us the sample.

 

Thanks,

Akash.

[veeramani.arthanari]

Hi Akash,

Thanks for you response.

Use these options and you can see the sliced piece is almost overlapping. As it's in browser you can't see it that much, but think of mobile as the device size is very small, it'll overlap like I attached.

"startingAngle": "300",
"pieRadius": "70",
"labelSepChar": "\n"

If you change the settings, you'll see the below result

[Akash Biswas]

Hi,

 

You have set a line break "\n" to the display string, hence it is getting overlapped for certain scenarios. So, you can :

- Either remove the line break, and it would not result in overlapping.

- Or you can set the attribute "labelDistance" with some pixel values and keeping the line break in the display string to avoid overlapping.

Refer to this sample fiddle : https://jsfiddle.net/4pbqz6y1/

 

Thanks,

Akash.

[veeramani.arthanari]

Hi Akash,

Removing "\n", moving the text away from the graph if the description is too long. In the above fiddle which you've shared, change the data "Electronics" to "Electronics with a very long text". You'll see the attached result.

Thanks,

Veeramanikandan

[Akash Biswas]

Hi,

 

To avoid the long label text going out of the chart canvas, you can set the below two attributes for those scenarios :

"manageLabelOverflow": "1",

"useEllipsesWhenOverflow": "1"

The "manageLabelOverflow" attribute tries to manage overflow of data labels. If enabled, data labels are either wrapped or truncated with ellipses to prevent them from overflowing out of the chart canvas. Please check the below attribute list of Doughnut chart for the attribute description :

https://www.fusioncharts.com/dev/chart-attributes/doughnut2d

Also find a sample fiddle for reference : https://jsfiddle.net/y6x2wesm/

 

Thanks,

Akash.

[veeramani.arthanari]

Hi Akash,

Any update on this solution.?

 

Thanks,

Veeramanikandan

[Akash Biswas]

Hi,

 

As mentioned in the previous response, that enabling the "manageLabelOverflow" attribute manages the labels automatically that overflows. Currently it can truncate or show ellipses as opted using "useEllipsesWhenOverflow" attribute.

Refer to the sample fiddle : https://jsfiddle.net/78wsyurb/

As of now it is not possible to show the labels in multiple lines instead of ellipses.

 

Thanks,

Akash.

[veeramani.arthanari]

Thank you Akash for your help