Question

I am trying to create a pie chart and am customizing the example here: http://raphaeljs.com/pie.html

I need to draw lines from the labels to the slices but IE is giving me trouble and I’m not sure what to do about overlapping lines and labels.

Has anyone done this before?

Answer 1

this maybe useful to you:

Overlapping issues can usually be solved by using:

a) “.toFront()” on the raphael element, that should appear in foreground
b) “.getBBox()” at your label and use its parameters to figure out the starting point.

those functions can be looked up in the raphaeljs reference.

.getBBox() should be a good way to start, when you try to connect elements. you can easily figure out its meassurements and use those values (x,y,width,height) to calculate the entry point of your path

that makes it easier to avoid any overlapping at all. but keep in mind the end SVG elements are directly placed within the dom and therefor are meant to work in layers.
overlapping / partially hiding elements often offer you a great animation potential and are not really a bad thing to work with.