I am creating a bar chart with angular-chart.js where bars have different color depending on the value of the column.
Say columns having value more than five should be in red color otherwise green. Its working fine but when I mouse over to one of the bars its color changes (probably depending on the value of previous bar in the bar chart) which is very annoying.
How can I get rid of this problem?
HTML :
<head>
<script src="Chart.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="chart-angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="chartMaker">
<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes"
labels="chartParams.listOfLocations" series="chartParams.series"
colours="chartParams.colours" options="chartParams.options">
</canvas>
</body>
</html>
And I am setting the colors for each bar with the condition
var graph = angular.module('graph', ['chart.js'], function(){});
graph.controller('chartMaker',["$scope",
function($scope){
$scope.chartParams = {
listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
votes: [[5,10,6,7,2,3]],
series: ["Nice Places"],
colours: [{fillColor:[]}],
options: {barShowStroke : false}
};
for(i=0;i<$scope.chartParams.votes[0].length;i++){
if($scope.chartParams.votes[0][i] > 5){
$scope.chartParams.colours[0].fillColor[i]="#FF0000"
}else{
$scope.chartParams.colours[0].fillColor[i]="#00FF00"
}
}
}
]);
You can see this plunker having same problem Setting different colors for bars in Bar Chart
I read one post on SO where some suggested to call update method, but how can I call update method from my JS file ?
