Increase spacing between elements in pie chart

[swarrenParticipant]

We’re having a problem with charts where the values are very small. When we render them the labels get mashed together.

I increased the labelRadius but this cause’s other problems:

Is there some way to prevent having the text overlap?

[ChristopherParticipant]

Hi swarren,

Please provide a demo of the issue you’re having using JSFiddle or JSEditor so we can give you a solution.

If the values of the chart are too low it’s normal for the labels to overlap. You can change the range of the values using the minValue, maxValue
properties to make the chart columns look bigger and the labels won’t overlap.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[swarrenParticipant]

Here’s my example:
http://jsfiddle.net/swarrenzimconet/k469n2hs/1/

[ChristopherParticipant]

Hi swarren,

labelRadius is the solution. What issues does it create in your case? I tried applying it to the jqxChart in your jsFiddle example and it works great.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[swarrenParticipant]

Christoper,
See how in the second image the colored line (there must be a name for that) goes through the text. That was the problem I should have explained better. It looks like it’s not a problem with the version of the library you’re using on JSFiddle so we’ll have to upgrade to the new version.

However, something doesn’t look right when I change labelRadius to 180 (in the JSFiddle). The green line looks like it’s pointed to 0.943 and the blue line looks like it’s pointed to 1.415. My client will complain about that. Is there any way to fix it without turning off labelLinesAngles?

[ChristopherParticipant]

Hi swarren,

Yes, the API of the jqxChart allows lots of style customizations of the labels. For example you could use the offset and padding properties to adjust the position of the lines of the labels. Here is an example:
http://jsfiddle.net/k469n2hs/7/

These are the properties which are used to configure the style of the labels:

labels – object describing the labels properties of the axis

• visible – true/false/’custom’ determining the visibility. When ‘custom’ is set, displays only custom values/offsets.
• offset – labels offset, e.g {x: -5, y: 0}
• angle – text rotation angle
• horizontalAligment – horizontal labels alignment
• verticalAligment – vertical labels alignment
• class – CSS class of the labels
• backgroundColor – labels background color
• backgroundOpacity – labels background opacity
• borderColor – labels border line color
• borderOpacity – labels border line opacity
• padding – object describing the padding of the labels
• left – left padding
• right – right padding
• top – top padding
• bottom – bottom padding
• autoRotate – boolean determining if auto rotation is enabled
• formatSettings – object describing the format settings of the labels
• formatFunction – callback function used to format the labels.
• radius – radius of the labels in pie/donut series
• linesEnabled – determines whether to use lines for the labels in pie/donut series
• linesAngles – determines whether to use direct lines for the labels in pie/donut series
• custom – an array of custom values/offsets where a label/tickmark/gridline will be displayed

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts