Graphael pie chart legend overlap

Question

I've been using gRaphaël charts for a few weeks now, and every now and then I get some weird issues. A recurring theme is that the pie chart legend labels all get squish together in the wrong places. Picture > words:

The chart is created as you would expect, in this case:

var r = Raphael(domNode, 300, 120);

this.chart = r.piechart(55, 55, 50, [75, 25],
    {
        colors: [
            "000-#d00-#900",
            "000-#3a3-#070"
        ],
        legend: ["Building", "Tertiary Education"],
        legendpos: "east"
    });

I then do some more basic styling, but turning that off doesn't help. The problem is clearly visible in the <svg> node (the text and circle nodes share overlapping positions), but I don't know where it comes from or why, and it only happens sometimes; other charts work just fine. There's nothing on the forums or issue tracker either, though I just realised I should probably ask there instead/as well.

Using Raphaël 2.1.0 and g.Raphael 0.51.

Answer 1

I have found the following blog post which deals with this exact problem. If the pie chart is rendered in an initially hidden element, gRaphael has problems to compute the positions properly resulting in this stacked legend:

So the solution is to render the facebox partial first, after the facebox is shown, then you execute the Raphael Javascript. In other word, make sure you generate the chart when the chart container is there and not hidden!

I have solved this by moving the create pie chart function from the jQuery document ready directive to the on click event that will make the hidden elements visible.