Pie chart labels can overlap

[Patorn]

I have the problem with the labels as you guys can see on the image
below.
The numbers can overlap for pie chart

http://i.imgur.com/szHhl.png

Anyone knows how to fix this issue?

Thanks a lot!

[Carl Sutherland]

That shouldn't happen!  Could you please fork this: http://jsfiddle.net/cesutherland/ZFBj5/ with your reproduction of the issue?

-Carl

[Patorn]

http://jsfiddle.net/hPwfd/1/

Thank you, Carl

- Patorn

On Apr 24, 7:32 am, Carl Sutherland <c...@humblesoftware.com> wrote:
> That shouldn't happen!  Could you please fork this:http://jsfiddle.net/cesutherland/ZFBj5/with your reproduction of the issue?

[Victor Stan]

I got around it by increasing the padding on the text labels (make sure you enable Html rendering for text label first)

.flotr-labels {

font-size:small;

}

.flotr-labels .flotr-grid-label {

padding:10px;

}

You can also work with modifying the label rendered:

                 pie : {

    show : true,

    explode : 15,

    fillOpacity: 0.8,

    shadowSize : 0,

    lineWidth: 0,

    labelFormatter : function (total, value) {

return (100 * value / total).toFixed(0)+'%';

}

[Victor Stan]

On second though, it's actually causing a strange un-aligned positioning with many small slices in one place... so padding the labels may not be the way to go...

as an example, this is what i have: (see screenshot)

[Carl Sutherland]

Ahh ok, looks like there is a bug in the explode property.  Could you please file a ticket on https://github.com/HumbleSoftware/Flotr2?

-Carl

[Carl Sutherland]

I take it back, this is correct.  This implementation, honestly, should be used individual pie slices.  A separate implementation would be necessary for 'explode all', which would be implemented as a 'cut width' from the outside to the inside.

-Carl

[Victor Stan]

Hmm,

Given enough data points, labels will overlap, here is a modified example pie chart, I just duplicated one of the datapoints ad nauseum for illustration. Note that the example shows the explode being applied to the pie chart overall as well as to one individual slice.

http://jsfiddle.net/victorbstan/BZHX2/4/

[Carl Sutherland]

Cool.  So it'll be a pretty major change to add collision detection to the pie labels.  This should be done for when a couple small slices are next to each other.

However, in information design a pie chart with so many slices would be better as a bar chart.

-Carl

[Victor Stan]

:) you probably have a good point

[foob...@gmail.com]

The issue also happens for less slices: http://jsfiddle.net/BZHX2/12/
The problem is not the number of slices itself but multiple small slices being rendered next to each other.
Is it worth opening an issue?