Search code examples
javascriptcssangularjsgoogle-chromeflot

Angular Flot - Passing Hex Color with Alpha not working in Google Chrome

I am currently working with the angular-flot library to and facing a strange behavior in Google Chrome Browser and the bands feature of flot.

Pictures say more than 1000 words, so here a screenshot of the problem first:

Working Example (Firefox): enter image description here

Problem (Chrome):

enter image description here

So it seems that Google Chrome has some Issues with parsing the Hexcolor with Alpha values. The below code shows the JSON for the line with the bands feature (indicates the standard deviation in this particular case).

$scope.ChartOptions.series.push({
                    "label": "Testgraph",
                    "color": '#33FF55",
                    rendererOptions: {
                        bands: {
                            show: true,
                            interval: statisticsService.standardDeviation($scope.Data[i]),
                            fillColor: "#8CFF3333"
                        }
                    }
                });
Solution

  • Hex color codes with alpha values are only recently part of the CSS standard and are only supported by some browsers (e.g. Firefox), not others (e.g. Chrome, IE), see here for more info.

    Use the rgba(140, 255, 51, 0.2) notification to have it work in all browsers.