angular chart js set fill color of bar chart

Question

i think im going crazy - i've literally looked through all the chart js and angular chart js documentation and examples and cannot change the fill color of my bar chart.

right now i have this in the html:

<canvas
  data-ng-show='graphType.bar'
  class="chart chart-bar graph"
  chart-data="data"
  chart-labels="labels"
  chart-colours=colorsEven>
</canvas>

in the controller i have:

$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

// then i have a GET request to get the data

for (var i=0; i<res.data.length; i++) {
    $scope.results[res.data[i].Body] ++;
}
for (var key in $scope.results) {
    $scope.data.push($scope.results[key]);
}
$scope.colorsEven = [{ 
    fillColor: 'rgba(59, 89, 152,0.2)',
    strokeColor: 'rgba(59, 89, 152,1)',
    pointColor: 'rgba(59, 89, 152,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];

i can't see what i'm doing wrong? does there have to be an object for each bar? so in this case 10 objects? btw the bar chart is populating just fine - labels and data are where they should be. just color isnt working.

EDIT: to clarify - i'm looking for all the bars to be the SAME color.

Shuhei Kagawa · Answer 1 · 2016-09-23T10:43:45.443

2

HTML attributes should be quoted by "". Also, it should be chart-dataset-override instead of chart-colours.

<canvas
  data-ng-show="graphType.bar"
  class="chart chart-bar graph"
  chart-data="dataProp"
  chart-labels="labels"
  chart-dataset-override="colorsEven">
</canvas>

To make chart-dataset-override work, chart-data must be an Array of data Arrays.

$scope.dataProp = [$scope.data];

edited Sep 23 '16 at 10:43

answered Sep 23 '16 at 10:01

Shuhei Kagawa

4,752
1
33
31

What about `chart-colors` instead of `chart-colours`? – Shuhei Kagawa Sep 23 '16 at 10:04
no that still doesn't work - also to clarify. im looking to make all the bars the same color...if that makes a difference. – Sabrina Sep 23 '16 at 10:05
According to the examples on the official website and source code, `chart-colors` has to be an Array. – Shuhei Kagawa Sep 23 '16 at 10:11
i have an object in an array? i've seen examples that work with an object in an array... – Sabrina Sep 23 '16 at 10:12
Which example did you see? – Shuhei Kagawa Sep 23 '16 at 10:22
As far as I see the documentation, `chart-dataset-override` seems to be a correct attribute. – Shuhei Kagawa Sep 23 '16 at 10:23
Now it's working. I'll update the answer. https://plnkr.co/edit/SHjohndAFT6nzbTRf5mw?p=preview – Shuhei Kagawa Sep 23 '16 at 10:41
It's still not working for me - could it be because i have multiple – Sabrina Sep 23 '16 at 23:07
I can't say anything without looking at your entire source code. I can look further if you create an MCVE on plunkr or somewhere. http://stackoverflow.com/help/mcve – Shuhei Kagawa Sep 24 '16 at 00:49
Hi @Shuhei, thanks for having a look at it. In the end I required angular-chartjs into the file and just overrode the ```Chart.defaults.global.colors``` to an empty array. And for each bar, pushed the color I wanted. – Sabrina Sep 30 '16 at 00:32

score 1 · Answer 2 · edited May 23 '17 at 12:00

1

As you can see in this post, the naming changed. If you are using angular-chart 1.0.3 the attribute is chart-colors.

Also, fillColor is now backgroundColor and you can use borderColor for the border's color of the bar.

edited May 23 '17 at 12:00

Community

1
1

answered Oct 27 '16 at 11:08

eli0tt

677
1
7
19

angular chart js set fill color of bar chart

2 Answers2