Como ter barras coloridas sólidas no gráfico de barras do gráfico angular

Question

Nov 03, 2016, 06:39 PM

charts javascript angular-chart chart.js angularjs

Como ter barras coloridas sólidas no gráfico de barras do gráfico angular

Estou usando o gráfico angular (baseado no chart.js) para criar alguns gráficos de barras e estou tendo problemas para obter o estilo de barra que desejo. Quero que as barras tenham cores sólidas como esta:

Mas não consigo descobrir como se livrar do alfa que chart.js adiciona por padrão:

Meu html fica assim:

  <body ng-app="myApp" ng-controller="myController as ctrl">
    <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"></canvas>      
  </body>

E o javascript:

angular.module('myApp', ['chart.js'])

    .controller('myController', [function() {
        var ctrl = this;

        ctrl.socialChart = {
            options: {
                legend: {
                    display: true
                }
            },
            labels: ['2012'],
            series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
            // colors: ['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163, 159, 1)'],
            colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
            data: [[1178], [652], [1004], [838]]
        }
    }]);

Aqui está um Plunker demonstrando:Plunker

Encontrei muitas informações sobre o uso da notação rgba (que por algum motivo me dá as cores erradas) e fillColor (que eu não consigo trabalhar). É difícil dizer quais são as informações da versão 1 ou 2 do chart.js.

Qualquer ajuda seria apreciada.