How can I set different colours for each bar in angular-chart.js?

Question

I\'ve looked at How to change colours for Angular-Chart.js, but it relates to colours for an entire (dataset), not a specific bar.

What I\'m looking for is a way to

Answer 1

One of the bigger problems with Chart libraries is that sooner or later you hit a wall, which can only be breached by hacking or extending the library. Knowing you hit that wall and what to could be the answer to this question.

Even though you can create a custom chart.js graph you could also solve it with d3.js. I've taken one of the basic angular d3.js barchart examples and added the behavior you want:

var colors = d3.scale.category10();

// ...

bars.enter().append('rect')
    .classed('bar', true)
    .attr({x: chartW,
           width: barW,
           y: function(d, i) { return y1(d); },
           height: function(d, i) { return chartH - y1(d); },
           fill: function(d,i) { return colors(i) }
    })
// ...

http://plnkr.co/edit/9RCYAPCEj9iRsxkkYPaV?p=preview

Customizing a chart in any way, like changing fill, stroke or anything else is within reach. It is of cause still though a lot more code, but if you want to customize beyond library support, it is always a lot more code.