Question

Consider:

value1 = 5;
v1_color = #ff0000;

value2 = 4;
v2_color = #00ff00;

value3 = 3;
v3_color = #0000ff;

var r = Raphael("holder");
pie = r.piechart(320,320,250,{value1,value2,value3},{colors: [v1_color, v2_color,v3_color]});

This will produce a pie chart where the upper slice is red, the slice on the bottom right is green, and the final slice is blue. However, if the values were changed like this:

value1 = 4;
value2 = 3;
value3 = 5;

the chart would look exactly the same, but the colors wouldn’t represent the proper value anymore. In the source code, lines 99-101 show the values being sorted, but nothing else.

I want a color to correspond to a certain variable, no matter how large it is, rather than the largest variable getting the first color listed in the options.

In the part of the code where it draws the slices (line 133), it refers to opts.matchColors, but I can’t find any documentation about how to set that when calling the function.

Any ideas how to achieve this?

Answer 1

Unfortunately opts.matchColors is not documented at all because it is exactly what you need.

opts.matchColors forces it to match the order of the colors array with the order of the values array. When the values are reordered by size, the colors will be applied to the wedge with their original values.

matchColors defaults to false, so you will need to explicitly set it in the options array like this:

var pie = r.piechart(320, 320, // center
                     250,      // radius
                     [
                         value1,
                         value2,
                         value3
                     ],
                     {
                         colors       : [
                                            v1_color,
                                            v2_color,
                                            v3_color
                                        ],
                          matchColors : true
                     });