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

Plunker Demo

The easiest thing to do was to modify the chart.js source file to accept an array of colors for fillColor rather than a single color string.

If you could get one of the other proposed solutions working, I think it would end up having to be done in a very un-angular way.

Some people may not like tweaking the source, but for how simple and easy it was to do, and it achieves the desired result, and it isn't any less 'angular' in it's solution...let's just call it an improvement to chart.js.

Note that I only modified the "bar" chart to accept an array of colors, because it seems chart.js references the fillColor separately in each chart type. So you should be able to make this modification to work for any of the charts types.

The place you need to modify:

            helpers.each(dataset.data,function(dataPoint,index){
                //Add a new point for each piece of data, passing any required data to draw.
                datasetObject.bars.push(new this.BarClass({
                    value : dataPoint,
                    label : data.labels[index],
                    datasetLabel: dataset.label,
                    strokeColor : dataset.strokeColor,
                    fillColor : dataset.fillColor[index],   // <- added [index] here
                    highlightFill : dataset.highlightFill || dataset.fillColor,
                    highlightStroke : dataset.highlightStroke || dataset.strokeColor
                }));
            },this);

This block of code can be found in the Chart.type.extend function for the bar chart. Just look for this:

Chart.Type.extend({
        name: "Bar",

and look further down inside that function for the place where it pushes the fillColor to the datasetObject.bars.

Now just set up your chart like before, except feed it an array for fillColor:

function($scope){
          $scope.chartParams = {
        listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
        votes: [[5,10,6,7,2]],
        series: ["Nice Places"],
        colours: [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}],
        options: {barShowStroke : false}
      };
        }