Fix for RGB/RGBA Colors using new notation and documentation (fixes issue #476) (#488)

Author: WilliamJohnsonJr

README.md

@@ -178,6 +178,54 @@ via a function through the `getColor` attribute.
 Hex colors are converted to Chart.js colors automatically, 
 including different shades for highlight, fill, stroke, etc.
 
+RGB colors may be input by using a string in the format "rgb(r,g,b)".
+
+## Example - RGB Colors
+
+```
+angular.module('app',['chart.js'])
+        .controller('MainController', function($scope){ 
+          $scope.colors = ["rgb(159,204,0)","rgb(250,109,33)","rgb(154,154,154)"];
+          $scope.labels = ["Green", "Orange", "Grey"];
+          $scope.data = [300, 500, 100];
+        });
+```
+
+RGBA colors may also be input by using a string in the format "rgba(r,g,b,a)".
+They may be used alongside RGB colors and/or Hex colors.
+
+## Example - RGBA Colors
+```
+angular.module('app',['chart.js'])
+        .controller('MainController', function($scope){ 
+          $scope.colors = ["rgba(159,204,0,0.5)","rgba(250,109,33,0.7)","rgba(154,154,154,0.5)"];
+          $scope.labels = ["Green", "Orange", "Grey"];
+          $scope.data = [300, 500, 100];
+        });
+```
+
+Colors may also be input as an object by using the format in the example below.
+Colors input as objects, Hex colors, RGB, and RGBA colors may be mixed and matched.
+
+## Example - input color as an object
+```
+angular.module('app',['chart.js'])
+        .controller('MainController', function($scope){ 
+          $scope.colors = [
+            {
+              backgroundColor: "rgba(159,204,0, 0.2)",
+              pointBackgroundColor: "rgba(159,204,0, 1)",
+              pointHoverBackgroundColor: "rgba(159,204,0, 0.8)",
+              borderColor: "rgba(159,204,0, 1)",
+              pointBorderColor: '#fff',
+              pointHoverBorderColor: "rgba(159,204,0, 1)"
+            },"rgba(250,109,33,0.5)","#9a9a9a","rgb(233,177,69)"
+          ];
+          $scope.labels = ["Green", "Peach", "Grey", "Orange"];
+          $scope.data = [300, 500, 100, 150];
+        });
+```
+
 ## Browser compatibility
 
 For IE8 and older browsers, you will need 

angular-chart.js

@@ -171,7 +171,6 @@
 
       scope.chartGetColor = getChartColorFn(scope);
       var data = getChartData(type, scope);
-
       // Destroy old chart if it exists to avoid ghost charts issue
       // https://github.com/jtblin/angular-chart.js/issues/187
       destroyChart(scope);
@@ -229,8 +228,12 @@
     }
 
     function convertColor (color) {
-      if (typeof color === 'object' && color !== null) return color;
+      // Allows RGB and RGBA colors to be input as a string: e.g.: "rgb(159,204,0)", "rgba(159,204,0, 0.5)"
+      if (typeof color === 'string' && color[0] === 'r') return getColor(rgbStringToRgb(color));
+      // Allows hex colors to be input as a string.
       if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
+      // Allows colors to be input as an object, bypassing getColor() entirely
+      if (typeof color === 'object' && color !== null) return color;
       return getRandomColor();
     }
 
@@ -240,13 +243,15 @@
     }
 
     function getColor (color) {
+      var alpha = color[3] || 1;
+      color = color.slice(0, 3);      
       return {
         backgroundColor: rgba(color, 0.2),
-        pointBackgroundColor: rgba(color, 1),
+        pointBackgroundColor: rgba(color, alpha),
         pointHoverBackgroundColor: rgba(color, 0.8),
-        borderColor: rgba(color, 1),
+        borderColor: rgba(color, alpha),
         pointBorderColor: '#fff',
-        pointHoverBorderColor: rgba(color, 1)
+        pointHoverBorderColor: rgba(color, alpha)
       };
     }
 
@@ -269,6 +274,13 @@
       return [r, g, b];
     }
 
+    function rgbStringToRgb (color) {
+      var match = color.match(/^rgba?\(([\d,.]+)\)$/);
+      if (! match) throw new Error('Cannot parse rgb value');
+      color = match[1].split(','); 
+      return color.map(Number);
+    }
+
     function hasData (scope) {
       return scope.chartData && scope.chartData.length;
     }
@@ -364,4 +376,4 @@
       scope.$emit('chart-destroy', scope.chart);
     }
   }
-}));
+}));

test/test.unit.js

@@ -97,6 +97,34 @@ describe('Unit testing', function () {
       });
     });
 
+    describe('colors', function(){
+      it('sets the chart colors when Hex colors, RGB colors, RGBA colors, or objects are used', function (){
+        var datasets;
+        var markup = '<canvas class="chart chart-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>';
+          scope.colors = [
+            {
+              backgroundColor: 'rgba(159,204,0,0.2)',
+              pointBackgroundColor: 'rgba(159,204,0,1)',
+              pointHoverBackgroundColor: 'rgba(159,204,0,0.8)',
+              borderColor: 'rgba(159,204,0,1)',
+              pointBorderColor: '#fff',
+              pointHoverBorderColor: 'rgba(159,204,0,1)'
+            },'rgba(250,109,33,0.5)','#9a9a9a','rgb(233,177,69)'
+          ];
+          scope.labels = ['Green', 'Peach', 'Grey', 'Orange'];
+          scope.data = [300, 500, 100, 150];
+        scope.$on('chart-create', function (evt, chart) {         
+          datasets = chart.chart.config.data.datasets;
+        });
+        $compile(markup)(scope);
+        scope.$digest();
+        expect(datasets[0].backgroundColor[0]).to.equal('rgba(159,204,0,1)');
+        expect(datasets[0].backgroundColor[1]).to.equal('rgba(250,109,33,0.5)');
+        expect(datasets[0].backgroundColor[2]).to.equal('rgba(154,154,154,1)');
+        expect(datasets[0].backgroundColor[3]).to.equal('rgba(233,177,69,1)');
+      });
+    });
+
     describe('dataset override', function () {
       it('overrides the datasets for complex charts', function () {
         var datasets;