veeramani.arthanari

Doughnut chart sliced piece is overlapping the other

Recommended Posts

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.

Chart Overlap.png

Share this post


Link to post
Share on other sites

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

Screenshot 2020-02-24 at 4.56.58 PM.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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,

5e60d136ee492_Screenshot2020-03-05at3_44_23PM.thumb.png.e6ce96a9690cd9e415145c43402d80bc.pngVeeramanikandan

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

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