raphael pie chart colors - charts

Question

Is there a way to prefix colours in raphael's pie chart? I need to be able to display for example gold in yellow and platinum in grey. The problem that I have at the moment is that if platinum has a higher value for e.g. 60% and gold 40% the platinum is displayed in yellow.
var r = Raphael("pieChartHolder");
var pie = r.piechart(155, 100, 50, [30, 60, 5, 5], {
colors: ['#FFDE7B', '#CFD0C6', '#E0DED9', '#93948C'],
legend: ['%%gold', '%%silver', '%%palladium', '%%platinum'],
legendpos: 'west'
});
pie.hover(function() {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);
if (this.label) {
this.label[0].stop();
this.label[0].attr({
r: 7.5
});
this.label[1].attr({
"font-weight": 800
});
}
}, function() {
this.sector.animate({
transform: 's1 1 ' + this.cx + ' ' + this.cy
}, 500, "bounce");
if (this.label) {
this.label[0].animate({
r: 5
}, 500, "bounce");
this.label[1].attr({
"font-weight": 400
});
}
});
});

Answer 1

Just add matchColors : true
opts.matchColors forces it to match the order of the colors array with the order of the values array. I saw it here:
https://stackoverflow.com/a/14349559

Answer 2

Why do you want to prefix colors? If the library ignores order of items and sorts them itself then you should pass already sorted items.
I included the underscore.js library and sorted your items in descending order.
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="g.raphael-min.js"></script>
<script type="text/javascript" src="g.pie-min.js"></script>
<script type="text/javascript">
function drawChart() {
var r = Raphael("pieChartHolder");
var items = [
{ value: 30, color: '#FFDE7B', title: '%%gold' },
{ value: 60, color: '#CFD0C6', title: '%%silver' },
{ value: 5, color: '#E0DED9', title: '%%palladium' },
{ value: 5, color: '#93948C', title: '%%platinum' }
];
items = _.sortBy(items, function(item){ return -item.value; }); // sort by descending
var pie = r.piechart(155, 100, 50, _.pluck(items, "value"), {
colors: _.pluck(items, "color"),
legend: _.pluck(items, "title"),
legendpos: 'west'
});
pie.hover(function() {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);
if (this.label) {
this.label[0].stop();
this.label[0].attr({
r: 7.5
});
this.label[1].attr({
"font-weight": 800
});
}
}, function() {
this.sector.animate({
transform: 's1 1 ' + this.cx + ' ' + this.cy
}, 500, "bounce");
if (this.label) {
this.label[0].animate({
r: 5
}, 500, "bounce");
this.label[1].attr({
"font-weight": 400
});
}
});
}
window.onload = drawChart;
</script>
<div id="pieChartHolder"></div>