Geek Answers Handbook

Different color for each column in angular-chartjs column

I use angular-chartJS in the project I'm working on, and I need a different color for each bar in the 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 tried adding the colours="medals_colours" attribute to my canvas, the only problem is that it only uses the first color in the array, and I want each color to represent each column. Therefore, #087D76 used to represent Gold , #B3BC3A for Silver , etc.

+7
javascript angularjs bar-chart angular-chart
source share
1 answer

As you want to give a different color for each column in the graph, you pass this value in an array. But the thing chart.js does not support this type of function.

Cause

The color that we can see in the bar area is nothing but fillColor if you look at the source code of chart.js Line

the 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);

The code above clearly states that fillColor requires a string. In any case, you can convey only one color in this line. And only one color will be applied to a series of bars. If we want you to fulfill the requirements, we need to make changes to chart.js .

Changes to chart.js

We need to make changes to this line from fillColor: dataset.fillColor, to fillColor: dataset.fillColor[index], so that we can pass in the color matrix that should be applied on each column of the chart. index variable .each ensures that the color is applied to the Bar in the way that we set in the array. Our color will be changed to $scope.medals_colours = [{fillColor:['#087D76', '#B3BC3A', '#38B665', '#8B4A9D']}]; .

Modified 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 this looks like hacks, but we have to do it.

Kudos is sent to @tpie this answer

Demo plunkr

+5
source share

More articles:


All Articles