Pie chart labels can overlap

844 views
Skip to first unread message

Patorn

unread,
Apr 23, 2012, 2:59:33 AM4/23/12
to flotr2
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

unread,
Apr 23, 2012, 8:32:22 PM4/23/12
to pato...@gmail.com, flotr2
That shouldn't happen!  Could you please fork this: http://jsfiddle.net/cesutherland/ZFBj5/ with your reproduction of the issue?

-Carl
Message has been deleted

Patorn

unread,
Apr 23, 2012, 10:31:32 PM4/23/12
to flotr2
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

unread,
Apr 24, 2012, 3:09:51 PM4/24/12
to flo...@googlegroups.com
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

unread,
Apr 24, 2012, 3:17:17 PM4/24/12
to flo...@googlegroups.com
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)
Screen Shot 2012-04-24 at 3.16.39 PM.png

Carl Sutherland

unread,
Apr 24, 2012, 3:18:54 PM4/24/12
to vic...@contactmonkey.com, flo...@googlegroups.com
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

unread,
Apr 24, 2012, 3:33:17 PM4/24/12
to vic...@contactmonkey.com, flo...@googlegroups.com
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

unread,
Apr 24, 2012, 3:48:55 PM4/24/12
to flo...@googlegroups.com, vic...@contactmonkey.com
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.

Carl Sutherland

unread,
Apr 24, 2012, 3:52:24 PM4/24/12
to vic...@contactmonkey.com, flo...@googlegroups.com
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

unread,
Apr 24, 2012, 4:27:58 PM4/24/12
to flo...@googlegroups.com, vic...@contactmonkey.com
:) you probably have a good point

foob...@gmail.com

unread,
Aug 18, 2016, 6:43:32 AM8/18/16
to flotr2, vic...@contactmonkey.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?
Reply all
Reply to author
Forward
0 new messages