RGBA notation doesn't work for colouring pie chart

[tiagosiebler]

Overview

Describe the issue. What is the issue and what did you expect? Because of issue #373 I moved to the latest versions of Chart.js and Angular-chart.js:

• Angular-chart.js: 1.0.2
• Chart.js: 2.2.1

Both downloaded via npm. Before moving, the rgba notation worked for customizing the colours of pie charts. After moving to the newer version of both dependencies, rgba colours are only working for line and bar charts (haven't tested others), pie and doughnut charts aren't taking values I provide here.

Step to reproduce

Reproduced in jsfiddle: http://jsfiddle.net/TSTS123/zcLvjLnL/

I've included a few prewritten attempts to predefine the colour-set used by the pie chart. Only hex notation seems to work (see "$scope.colors").

$scope.oldColors is what worked before upgrading.

All the others are variations of my attempts to get this working in the latest version. Is anybody able to get this working? I like the transparency effect of charts using the alpha value in rgba.

Thanks! Tiago

[WilliamJohnsonJr]

I forked your jsfiddle and have a solution here: https://jsfiddle.net/WilliamJohnsonJr/vLzmydgo/3/

angular-chart.js converts hex colors to objects that look like this:

{
    backgroundColor: "rgba(159,204,0,0.2)",
    borderColor: "rgba(159,204,0,1)",
    pointBackgroundColor: "rgba(159,204,0,1)",
    pointBorderColor: "#fff",
    pointHoverBackgroundColor: "rgba(159,204,0,0.8)",
    pointHoverBorderColor: "rgba(159,204,0,1)"
  }

However, if we look at angular-chart.js (not the minified file, because that would be a real pain to read), it is missing an appropriate getColor() function on line 239 of angular-chart.js to convert rgba colors into objects. As a result, rgba values submitted as "rgba(number, number, number, number)" are not converted into objects properly like the hex colors are. Because of this, the rest of the functions fail to run properly, and you get a weird chart. It's because getColors () on line 223 of angular-chart.js is submitting strings rather than objects to getChartData() on line 286 of angular-chart.js when you input rgba values.

So, we might want to come up with a function for angular-chart.js that converts an "rgba(number, number, number, number)" string into a properly formatted object. Is this feature already in angular-chart.js, or am I missing something?

[gblock0]

I'm still getting this error, and I'm using the updated angular-char.js file from the master branch. Using Chart.js v2.3.0.

The graph gets shown, but when I try to hover I get the unable to parse color from object error.

I've tried defining the color using

{
    backgroundColor: "rgba(159,204,0,0.2)",
    borderColor: "rgba(159,204,0,1)",
    pointBackgroundColor: "rgba(159,204,0,1)",
    pointBorderColor: "#fff",
    pointHoverBackgroundColor: "rgba(159,204,0,0.8)",
    pointHoverBorderColor: "rgba(159,204,0,1)"
  }

but that didn't work either.

my canvas directive:

<canvas ng-if="data" id="line" class="chart chart-line" chart-colors="colors" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride">

and corresponding data in controller

        $scope.colors = [
        {
            backgroundColor: 'rgba(159,204,0,0.2)',
            borderColor: 'rgba(159,204,0,1)',
            pointBackgroundColor: 'rgba(159,204,0,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: 'rgba(159,204,0,0.8)',
            pointHoverBorderColor: 'rgba(159,204,0,1)'
        } ];

        $scope.options = {
            scales: {
                yAxes: [
                {
                    id: 'y-axis-1',
                    type: 'linear',
                    display: true,
                    position: 'left'
                },
                {
                    id: 'y-axis-2',
                    type: 'linear',
                    display: true,
                    position: 'right'
                }
                ]
            }
        };

        $scope.datasetOverride = [ { yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' } ];
        $scope.series = [ 'Series A' ];
...
            .then(function (distribution) {

                var dataDistribution = new Array($scope.simulationOptions.numLabels);
                var durationIntervals = $scope.simulationOptions.simulationDuration * 60 / $scope.simulationOptions.numLabels;

                distribution.progressArray.forEach(function (progress) {
                    var indexOfArray = Math.floor(progress / durationIntervals);
                    if (!dataDistribution[indexOfArray]) {
                        dataDistribution[indexOfArray] = 0;
                    }
                    dataDistribution[indexOfArray]++;
                });

                dataDistribution.forEach(function (num, index) {
                    $scope.labels.push(index + 1);
                });

                $scope.data = dataDistribution;
...

[jtblin]

Can you provide a full jsbin to repro please?

[rodneicouto]

When I mouse hover a point, I get an error:

VM1029 Chart.bundle.min.js:10 Uncaught Error: Unable to parse color from object ["rgba(151,187,205,1)","rgba(220,220,220,1)","rgba(247,70,74,1)","rgba(70,191,189,1)","rgba(253,180,92,1)","rgba(148,159,177,1)","rgba(77,83,96,1)"]
    at r (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js:10:4408)

This is related to this issue?

http://jsfiddle.net/rodneicouto/zcLvjLnL/4/