Q:

How to bring text on the top of raphael path?

I have raphael paths plotted and text on its top but when two path overlaps the longer text are broken or hidden by other element. I have jsfiddle . I tried :
    r.toFront(); for path
  AND 
   'fill-opacity' : 0 for object

but it is not working. I tried manually positioning the text but it's rather very hard when the path is around 50 :(. Is there any property like z-index in raphael. I tried that too but it doesn't work.

A:

r.text()creates a new text element for you. You need to send that to the front. But if you add further paths afterwords, they are still stacked upon it.
To solve this, you may separate the text creation in a second loop or use Element.insertBefore() and Element.insertAfter() to send the country outlines to the back and the text-labels to front.
A quite simple fix is on jsfiddle.

