How can I set g.raphaeljs piechart orientation or starting point?

Question

By default g.raphaeljs piecharts show the largest value stretching from the top of the chart equally in both directions, with smaller values shown clockwise.

In the image below the largest value (1) starts at about 7 o'clock. I would like to show the largest value starting at 12 o'clock instead, how can that be done?

Answer 1

Ok , found it (and it works 100%)... over here: Added opts.startFromFixedAngle, so the 1st pie-slice will start paint…

Here is a working jsfiddle I just did : g raphael pie with starting angle set to 90

Don't forget to use the new argument startFromFixedAngle

Here is the code...

Apply the following to your g.pie.js

replace

 angle = 0,

with

 angle = opts.startFromFixedAngle || 0,

remove

 var mangle = angle - 360 * values[i] / total / 2;
 if (!i) {
     angle = 90 - mangle;

add

 var mangle;
 if (opts.startFromFixedAngle)
     mangle = angle + 360 * values[i] / total / 2;
 else {
     mangle = angle - 360 * values[i] / total / 2;
     if (!i) {
         angle = 90 - mangle;
         mangle = angle - 360 * values[i] / total / 2;
     }

Answer 2

The solution above is overly complicated and breaks any animation efforts dependent upon mangle (such as the one found here: RaphaelJs Pie Chart Animation on Hover). A single line change is sufficient if all you want is a fixed start angle, but if you want to use an argument as above you would replace

     if (!i) {
       angle = 90 - mangle;
       mangle = angle - 360 * values[i] / total / 2;
     }

with

     if (!i) {
       if (opts.startFromFixedAngle) {
         angle = opts.startFromFixedAngle;
       } else {
         angle = 90 - mangle;
       }
       mangle = angle - 360 * values[i] / total / 2;
     }

In my case, I just wanted all pie charts to begin at the 90 degree mark so I simply removed "- mangle" from the code in the first block.