Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

overlapping labels in flot pie chart

I use jquery flot for my pie charts and I have a problem with overlapping labels when the pie chart pieces are very small. Is there a good solution for that?

My pie chart:

series: { 
                pie: { 
                    show: true, 
                    radius: 1, 
                    label: { 
                        show: true, 
                        radius: 5/8, 
                        formatter: function(label, series){ 
                            return '<div style="font-size:12pt;text-  align:center;padding:2px;color:black;margin-left:-80%;margin-  top:-20%;">'+label+'<br/>'+Math.round(series.percent)+'%</div>'; 
                        }, 
                        background: { opacity: 0.5 } 
                    } 
                } 
            }, 
            legend: { 
                show: false 
            }

Thanks, Arshavski Alexander.

like image 312
alexarsh Avatar asked Feb 29 '12 09:02

alexarsh


People also ask

How do you prevent data labels overlapping in a pie chart?

To prevent overlapping labels displayed outside a pie chartOn the 3D Options tab, select Enable 3D. If you want the chart to have more room for labels but still appear two-dimensional, set the Rotation and Inclination properties to 0.

How do you avoid overlapping labels in a pie chart Matplotlib?

Use pie() method to plot a pie chart with slices, colors, and slices data points as a label. Make a list of labels (those are overlapped using autopct). Use legend() method to avoid overlapping of labels and autopct. To display the figure, use show() method.

How do you overlap a pie chart?

Click on the first chart and then hold the Ctrl key as you click on each of the other charts to select them all. Click Format > Group > Group. All pie charts are now combined as one figure. They will move and resize as one image.

What is an overlapping pie chart?

A common problem related to Pie Charts is the overlapping of the labels that represent data points with relatively small values, adjacent to each other. By default, the layout engine will try to arrange the data labels so they do not overlap.


2 Answers

A solution from Flot's Google code issues by Marshall Leggett(link):

I've found that it seems common for pie labels to overlap in smaller pie charts making them unreadable, particularly if several slices have small percentage values. This is with the jquery.flot.pie plugin.
Please see attached images. I've worked around this with the addition of an anti-collision routine in the label rendering code. I'm attaching a copy of the revised plugin as well. See lines 472-501, particularly the new functions getPositions() and comparePositions(). This is based in part on Šime Vidas' DOM-element collision detection code. Something like this might be a nice addition to the pie library.

pie labels overlappingpie labels overlapping fixed

long story short:

  1. In jquery.flot.pie.js and after the line 463 that contains:

    label.css('left', labelLeft);

add the following code:

// check to make sure that the label doesn't overlap one of the other labels
var label_pos = getPositions(label);
for(var j=0; j<labels.length; j++)
{
var tmpPos = getPositions(labels[j]);
var horizontalMatch = comparePositions(label_pos[0], tmpPos[0]);
var verticalMatch = comparePositions(label_pos[1], tmpPos[1]);                  
var match = horizontalMatch && verticalMatch;                           
if(match)
{
    var newTop = tmpPos[1][0] - (label.height() +1 );
    label.css('top', newTop);
    labelTop = newTop;
}       
}

function getPositions(box) {
        var $box = $(box);
        var pos = $box.position();
        var width = $box.width();
        var height = $box.height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}

function comparePositions(p1, p2) {
        var x1 = p1[0] < p2[0] ? p1 : p2;
        var x2 = p1[0] < p2[0] ? p2 : p1;
        return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}
labels.push(label);
  1. Add the following to drawLabels() and you are done:

    var labels = [];

like image 76
Nasser Al-Wohaibi Avatar answered Sep 30 '22 00:09

Nasser Al-Wohaibi


you could try hiding some of the labels under a certain percentage:

pie: { 
    label: {
         threshold: 0.1
    }
}

See graph / example 6 on http://people.iola.dk/olau/flot/examples/pie.html

like image 28
zedd45 Avatar answered Sep 30 '22 00:09

zedd45