CODEWITHSUNDEEP
angularjsionic-frameworkchart.js
denden130
denden130

Reputation: 231

ng-chart.js - First data set always has color gray

I use angular-chart.js and whenever I draw a chart (any type such as bar or line) I am seeing that the first data set's graph color is gray. I made sure the color is randomized before it is drawn...

Here is the controller.js:

.controller('chartController', function($scope){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
      [65, 59, 80, 81, 56, 51, 40],
      [28, 48, 40, 19, 86, 27, 90]
];

$scope.colours = [{
  fillColor:"rgba(220,220,220,0.4)",
  strokeColor:"rgba(220,220,220,0.2)",
  highlightFill:"rgba(220,220,220,0.5)",
  highlightStroke:"rgba(220,220,220,0.1)"
}];
})

Below is the actual output:

Gray for the First Data Set

Upvotes: 0

Views: 1204

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

With this 

$scope.colours = [{
  fillColor:"rgba(220,220,220,0.4)",
  strokeColor:"rgba(220,220,220,0.2)",
  highlightFill:"rgba(220,220,220,0.5)",
  highlightStroke:"rgba(220,220,220,0.1)"
}];

you are passing angular-chart one colorset. Since your have 2 datasets in your chart, angular-chart will use this colorset (i.e. gray) for the 1st dataset and for the 2nd dataset it will generate a random colour.

If you want random (randomized at each redraw) colours for both datasets do this

$scope.colours = [];

If you want fixed colours for both, pass it an array of 2 colorsets (instead of 1). If you want to use the global default, just set it to null

$scope.colours = null;

Upvotes: 1

Related Questions