Angular-chart.js histogram with 100% opacity

Question

UPDATE JUNE 02, 2017 . We fixed the problem, but not from the answers here. I will try to add the solution that we have if I find it. We also switched to angular-nvd3 , which uses d3 .

EDIT 1 : added backgroundColor to options, still doesn't work. Not sure if I put it in the right place.

Using the sample here . How to make color 100%?

JS:

 $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; $scope.type = 'StackedBar'; $scope.series = ['2015', '2016']; //$scope.colors = ['#AA1921', '#18AF5C']; $scope.options = { scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] }, title: { display: true, text: 'My First Bar Chart' }, // added as suggested backgroundColor: ['rgba(170, 25, 33, 1)', 'rgba(170, 25, 33, 1)'] }; $scope.data = [ [65, 59, 90, 81, 56, 55, 40], [28, 48, 40, 19, 96, 27, 100] ]; 

HTML

 <canvas class="chart chart-bar" chart-data="data" chart-labels="labels" chart-options="options" chart-series="series" chart-colors="colors"></canvas> <!-- chart-colors is removed when using the backgroundColor --> 

I really want to use such an implementation, but most of the problems I find use a different implementation.

Answer 1

You need to declare a full color object if you want to play with opacity. You can use hex or rgba

HTML:

 <canvas class="chart chart-bar" chart-data="data" chart-labels="labels" chart-options="options" chart-series="series" chart-colors="colors"></canvas> 

JS:

 $scope.compareChart.colors = [ { backgroundColor: '#b3e7fb', borderColor: '#b3e7fb', hoverBackgroundColor: '#b3e7fb', hoverBorderColor: '#b3e7fb' } ]; 

See https://github.com/jtblin/angular-chart.js/issues/131

Answer 2

Angular-chartJS uses chart-options from the ChartJS parameter configuration . Set backgroundColor inside the parameters.

Source: https://github.com/jtblin/angular-chart.js

Answer 3

Try adding colors like this should work:

 rgba(170, 25, 33, 1)