angular-chart.js bar chart with 100% opacity color

Question

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

EDIT 1: Added backgroundColor in options, still doesnt work. Not sure if I put it in the correct place.

Using the sample here. How to make the color fill 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 this kind of implementation but most problems I find are using a different implementation.

score 3 · Answer 1 · answered Oct 20 '16 at 03:18

You need to declare the 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

score 0 · Answer 2 · answered Aug 11 '16 at 10:09

0

Angular-chartJS uses chart-options from ChartJS Option Configuration. Set backgroundColor within options.

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

answered Aug 11 '16 at 10:09

IronAces

1,857
1
27
36

So my options look like this now: `$scope.options={scales:{xAxes:[{stacked:!0}],yAxes:[{stacked:!0}]},title:{display:!0,text:"My First Bar Chart"},backgroundColor:["rgba(170, 25, 33, 1)","rgba(170, 25, 33, 1)"]};` But still not 100% filled. – Dev Aug 11 '16 at 10:25

score 0 · Answer 3 · answered Aug 11 '16 at 10:11

0

Try adding colors like this it should work:

rgba(170, 25, 33, 1)

answered Aug 11 '16 at 10:11

user3743266

1,124
4
16
28

So my options look like this now: `$scope.options={scales:{xAxes:[{stacked:!0}],yAxes:[{stacked:!0}]},title:{display:!0,text:"My First Bar Chart"},backgroundColor:["rgba(170, 25, 33, 1)","rgba(170, 25, 33, 1)"]};` But still not 100% filled. – Dev Aug 11 '16 at 10:26

angular-chart.js bar chart with 100% opacity color

3 Answers3