Looking for assistance with Angular chart js. Is there a way to alternate the colors of the chart on every other row?
Here is the code snippet:
<canvas ng-if="hasStats" id="pie" class="chart chart-pie"
chart-type="Pie"
chart-colours=colors
chart-data="data"
chart-labels="labels"
chart-legend="true">
</canvas>
Below is the JavaScript code:
$scope.labels = ["label 1", "label 2", "label 3"];
$scope.data = [300, 200, 500];
$scope.colors = [{
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)'
},
{
fillColor: 'rgba(0, 132, 180,0.2)',
strokeColor: 'rgba(0, 132, 180,1)',
pointColor: 'rgba(0, 132, 180,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(0, 132, 180,0.8)'
},
{
fillColor: 'rgba(233, 30, 99,0.2)',
strokeColor: 'rgba(233, 30, 99,1)',
pointColor: 'rgba(233, 30, 99,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(233, 30, 99,0.8)'
}];
The code is within a table and I want to change the color scheme for each row. Odd rows should have one color scheme while even rows have another.
Update:
This could be a solution:
$scope.colorsOdd = [{ // facebook blue
...
},
{ // twitter blue
...
},
{ // mav
...
}];
$scope.colorsEven = [{ // facebook blue
...
},
{ // twitter blue
...
},
{ // teal
...
}];
Struggling to find the best approach to switch between them.
Update 2:
<td rowspan="5" width="200">
<div class="ng-scope" ng-controller="AmbasPieCtrl" ng-init="init(data)" style="width: 250px;">
<canvas ng-if="hasStats" id="pie" class="chart chart-pie"
chart-type="Pie"
chart-colours=colors
chart-data="data"
chart-labels="labels"
chart-legend="true">
</canvas>
<div ng-if="!hasStats" class="text-center">
<h4>No stats found</h4>
</div>
</div>
</td>