CODEWITHSUNDEEP
javascriptangularjschartschart.jsangular-chart
Sab
Sab

Reputation: 31

angular chart js set fill color of bar chart

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.

Upvotes: 0

Views: 3173

Answers (2)

femtozer
femtozer

Reputation: 687

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.

Upvotes: 1

Shuhei Kagawa
Shuhei Kagawa

Reputation: 4777

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];

Upvotes: 2

Related Questions