[Chartjs]-Angular-chart.js bar chart with 100% opacity color

4๐Ÿ‘

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

1๐Ÿ‘

Try adding colors like this it should work:

rgba(170, 25, 33, 1)

0๐Ÿ‘

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

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

Leave a comment