G Raphael js add text in pie chart

Question

I am facing a problem, I have created a pie chart, and want to place Text inside each compartment.

var pie = paper.piechart(pwidth / 2, pheight / 2, radius/1.2, data, {
        stroke: bgcolor,
        strokewidth: 1,
        startFromFixedAngle: 0,
        colors: barcolors
    });

And Adding Text:

  var t = paper.text(pwidth / 2 - 200, pheight / 2 - 300, 'Reports').attr({ 'fill': '#000000', 
 'font-size': '18', "font-weight": 800, 'opacity': 1.0 });

Now the problem is when I add a hover event on the pie chart and the cursor moves over the text It raises a MouseOut Event causing my animation to scale down and again as cursor moves out of text raises a MouseOver Event causing animation to again scale up.

How can I avoid this so my animation works correctly?

Thank you.

Answer 1

The Solution: 1) Make another pie chart with the same arguments and data, say pieShadow. 2) Make each and every sector's opactity: 0

pieShadow.series.items[0].attr({ 'opacity': 0 });

3) Now add a hover event on pieShadow and identify which sector is user hovering on:

for (var index_i = 0; index_i < pie.covers.items.length; index_i++) {
                if (this.cover == pie.covers.items[index_i]) {
                    break;
                }
            }

and make the actual pie show the hover effect:

pie.series.items[index_i].scale(1.1, 1.1, this.cx, this.cy);