Fix #54 - Add random colours if not enough for the data or allow passing a function that will return a colour

Author: jtblin

README.md

@@ -28,6 +28,7 @@ They all use mostly the same API:
 - `options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
 - `series`: (default: `[]`): series labels (line, bar, radar)
 - `colours`: data colours (will use default colours if not specified)
+- `getColour`: function that returns a colour in case there are not enough (will use random colours if not specified)
 - `click`: onclick event handler (line, radar)
 - `legend`: (default: `false`): show legend below the chart
 

angular-chart.js

@@ -80,7 +80,8 @@
         labels: '=',
         options: '=',
         series: '=',
-        colours: '=',
+        colours: '=?',
+        getColour: '=?',
         chartType: '=',
         legend: '@',
         click: '='
@@ -155,6 +156,8 @@
 
   function createChart (type, scope, elem) {
     if (! scope.data || ! scope.data.length) return;
+    scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
+    scope.colours = getColours(scope);
     var cvs = elem[0], ctx = cvs.getContext('2d');
     var data = Array.isArray(scope.data[0]) ?
       getDataSets(scope.labels, scope.data, scope.series || [], scope.colours) :
@@ -176,32 +179,39 @@
     return chart;
   }
 
-  function setLegend (elem, chart) {
-    var $parent = elem.parent(),
-      $oldLegend = $parent.find('chart-legend'),
-      legend = '<chart-legend>' + chart.generateLegend() + '</chart-legend>';
-    if ($oldLegend.length) $oldLegend.replaceWith(legend);
-    else $parent.append(legend);
+  function getColours (scope) {
+    var colours = scope.colours || angular.copy(Chart.defaults.global.colours);
+    while (colours.length < scope.data.length) {
+      colours.push(scope.getColour());
+    }
+    return colours;
   }
 
-  function updateChart (chart, values, scope) {
-    if (Array.isArray(scope.data[0])) {
-      chart.datasets.forEach(function (dataset, i) {
-        (dataset.points || dataset.bars).forEach(function (dataItem, j) {
-          dataItem.value = values[i][j];
-        });
-      });
-    } else {
-      chart.segments.forEach(function (segment, i) {
-        segment.value = values[i];
-      });
-    }
-    chart.update();
-    scope.$emit('update', chart);
+  function getRandomColour () {
+    var c = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
+    return getColour(c);
+  }
+
+  function getColour (c) {
+    return {
+      fillColor: rgba(c, 0.2),
+      strokeColor: rgba(c, 1),
+      pointColor: rgba(c, 1),
+      pointStrokeColor: '#fff',
+      pointHighlightFill: '#fff',
+      pointHighlightStroke: rgba(c, 0.8)
+    };
+  }
+
+  function getRandomInt (min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  function rgba(c, a) {
+    return 'rgba(' + c.concat(a).join(',') + ')';
   }
 
   function getDataSets (labels, data, series, colours) {
-    colours = colours || Chart.defaults.global.colours;
     return {
       labels: labels,
       datasets: data.map(function (item, i) {
@@ -214,7 +224,6 @@
   }
 
   function getData (labels, data, colours) {
-    colours = colours || Chart.defaults.global.colours;
     return labels.map(function (label, i) {
       return {
         label: label,
@@ -225,6 +234,30 @@
     });
   }
 
+  function setLegend (elem, chart) {
+    var $parent = elem.parent(),
+        $oldLegend = $parent.find('chart-legend'),
+        legend = '<chart-legend>' + chart.generateLegend() + '</chart-legend>';
+    if ($oldLegend.length) $oldLegend.replaceWith(legend);
+    else $parent.append(legend);
+  }
+
+  function updateChart (chart, values, scope) {
+    if (Array.isArray(scope.data[0])) {
+      chart.datasets.forEach(function (dataset, i) {
+        (dataset.points || dataset.bars).forEach(function (dataItem, j) {
+          dataItem.value = values[i][j];
+        });
+      });
+    } else {
+      chart.segments.forEach(function (segment, i) {
+        segment.value = values[i];
+      });
+    }
+    chart.update();
+    scope.$emit('update', chart);
+  }
+
   function isEmpty (value) {
     return ! value ||
       (Array.isArray(value) && ! value.length) ||

test/fixtures/54-not-enough-colours.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Not enough colours</title>
+  <link rel="stylesheet" href="../../dist/angular-chart.css">
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="pie" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-pie" data="data" labels="labels"
+                      colours="colours" get-colour="getColour"></canvas>
+            </div>
+            <p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
+              https://github.com/jtblin/angular-chart.js/issues/54
+            </a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script src="../../bower_components/angular/angular.min.js"></script>
+  <script src="../../bower_components/Chart.js/Chart.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="54-not-enough-colours.js"></script>
+</body>
+</html>

test/fixtures/54-not-enough-colours.js

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('pie', ['chart.js']);
+  app.controller('PieCtrl', ['$scope', function ($scope) {
+    var cnt = 0;
+    $scope.colours = [];
+    $scope.labels = ['Series A', 'Series B'];
+    $scope.getColour = function () {
+      return ++cnt % 2 > 0 ?
+      { // red
+        fillColor: 'rgba(247,70,74,0.2)',
+        strokeColor: 'rgba(247,70,74,1)',
+        pointColor: 'rgba(247,70,74,1)',
+        pointStrokeColor: '#fff',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(247,70,74,0.8)'
+      }
+        :
+      { // green
+        fillColor: 'rgba(70,191,189,0.2)',
+        strokeColor: 'rgba(70,191,189,1)',
+        pointColor: 'rgba(70,191,189,1)',
+        pointStrokeColor: '#fff',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(70,191,189,0.8)'
+      };
+    };
+    $scope.data = [49, 65];
+  }]);
+
+})();

test/fixtures/54-not-enough-colours.png

@@ -30,6 +30,7 @@ describe('integration', function () {
   mkdirp(WEBSHOT_FAILED_DIR);
 
   [
+    '54-not-enough-colours',
     '51-pie-update-colours',
     'charts'
   ].forEach(function (name) {