raphael pie chart colors

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>