Different color for each column in angular-chartjs bar chart

Question

I'm using angular-chartJS in a project I'm working on and I need a different color for each bar in a Bar Chart.

Canvas:

<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>

Controller:

$scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
$scope.series = ['Medaljer'];
$scope.medals_colours= ['#087D76', '#B3BC3A', '#38B665', '#8B4A9D'];

$scope.medal_data = ['1', '5', '2', '0'];

I've tried to add the attribute colours="medals_colours" to my canvas, the only problem is that it uses only the first colour in the array, and what I want is that each colour represents each column. So #087D76 is used to represent Gold, #B3BC3A for Silver, and so on

I believe you want this http://plnkr.co/edit/J1cDvM90YGOAmg5CLn3T?p=preview I will add explanation afterwards — Pankaj Parkar, May 27 '15 at 15:00
@pankajparkar That is exactly what I need. Thanks! I'll try to figure out what I am missing in the meantime then — Backer, May 27 '15 at 15:23
I'll add an answer in an hour.don't spend time on it.surely you will get stuck..I'll update an answer with explaination — Pankaj Parkar, May 27 '15 at 15:49
please check the answer which I've added & let me know if you have any queries — Pankaj Parkar, May 27 '15 at 16:53

score 5 · Accepted Answer · edited May 23 '17 at 11:53

As you want to give different color for each bar in graph, you are passing those value in array. But the thing is chart.js doesn't support such type of feature.

Reason

The color which we are able to see in bar area is nothing but fillColor option, If you look at the source code of chart.js Line

Code

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, //<--This line responsible for filling color
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

Above code clearly says that fillColor required string. In anyway the you can pass only one color in that string. And only one color will get applied to bar series. If we want to make you requirement workable then we need to make changes in chart.js.

Changes to be made in chart.js

We need to make change in this line from fillColor: dataset.fillColor, to fillColor: dataset.fillColor[index], so that we can pass color array which needs to be applied on each bar of chart. index variable of .each will ensure the color would be applied on Bar in order way which we had given in array. Our color would be changed to $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];.

Changed code

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] || dataset.fillColor, //<--getting color using index
        highlightFill: dataset.highlightFill || dataset.fillColor,
        highlightStroke: dataset.highlightStroke || dataset.strokeColor
    }));
}, this);

Markup

  <div class="graph-display" ng-controller="jsonServerBox">
    <canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks" 
    colours="medals_colours"></canvas>
  </div>

Controller

  app.controller('jsonServerBox', function($scope) {

    $scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
    $scope.series = ['Medaljer'];
    $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}];

    $scope.medal_data = [['1', '5', '2', '0']];
  });

I know it does look hacky but we have to make it.

Kudos goes to @tpie this answer

Demo Plunkr

Annd you were rigtht, couldn't figure it out by myself, but thanks to your great explanation I have managed to make it work with the colors. Thanks a lot man!!! — Backer, May 27 '15 at 17:09
@Backer For basic implementation you could refer this http://stackoverflow.com/a/28647813/2435473 your welcome dude.. Glad to help you.. Thanks — Pankaj Parkar, May 27 '15 at 17:11

Different color for each column in angular-chartjs bar chart

1 Answers1

Reason

Changes to be made in chart.js