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.
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.
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.
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.
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.
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.
long story short:
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);
Add the following to drawLabels()
and you are done:
var labels = [];
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With