angular-chartjs 2 - use multi bg-color for charts

Question

Plop,

I need help with the directive chart-color of angular-chartjs.

Before, the directive was called chart-colours.

I want to set multiple colors to my chart (like pie chart -> http://jtblin.github.io/angular-chart.js/)

I tried several things :

$scope["graph5"].colors = [{fillColor:["#FF0000", "#00FF00", "#0000FF", "#00FFFF", "#FFFF00"]}];

$scope["graph5"].colors = [ { fillColor: '#ffff00' }, { fillColor: '#0066ff' } ];

$scope["graph5"].colors = [{ // blue
        fillColor: 'rgba(151,187,205,0.2)',
        strokeColor: 'rgba(151,187,205,1)',
        pointColor: 'rgba(151,187,205,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(151,187,205,0.8)'
    }];

And my HTML :

<canvas class="chart chart-doughnut" chart-data="graph5.data" chart-labels="graph5.labels" chart-options="graph5.options" chart-colors="graph5.colors"></canvas>

Thanx !

PS : Sorry for my bad english...

TGarrett TGarrett · Accepted Answer · 2016-06-02T15:28:48

This is pretty simple'ish... But not really. Hopefully you can follow.

Controller:

     $scope.data = {
        labels: ['test', 'test2', 'test3', 'test4', 'test5'],
        datasets: [
            {
                label: 'My previous results',
                fillColor: 'rgba(220,220,220,0.2)',
                strokeColor: 'rgba(220,220,220,1)',
                pointColor: 'rgba(220,220,220,1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(220,220,220,1)',
                data: [65, 79, 90, 81, 16]
            },
            {
                label: 'My current results',
                fillColor: 'rgba(151,187,205,0.2)',
                strokeColor: 'rgba(151,187,205,1)',
                pointColor: 'rgba(151,187,205,1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(151,187,205,1)',
                data: [28, 48, 40, 19, 96]
            }
        ]
    };

html file:

       <div ng-controller="ChartController" class="ng-scope">
                    <canvas class="tc-chart" tc-chartjs-radar chart-options="options" chart-data="data" chart-legend="chart4"></canvas>
                    <div class="someclass">
                        <div tc-chartjs-legend="" chart-legend="chart4" class="inline ng-isolate-scope"><ul class="tc-chart-js-legend"><li><span style="background-color:rgba(220,220,220,1)"></span>My First dataset</li><li><span style="background-color:rgba(151,187,205,1)"></span>My Second dataset</li></ul></div>
                    </div>
                </div>

Hopefully this gives you the right direction.

angular-chartjs 2 - use multi bg-color for charts

1 Answers