如何在Angular-charts.js中更改图表线的颜色

Question

I have colors defined in my scope:

 $scope.colours = [{ // grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointHoverBackgroundColor: 'rgba(148,159,177,1)',
        borderColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#70ff06',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
        { // dark grey
            backgroundColor: 'rgba(77,83,96,0.2)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointHoverBackgroundColor: 'rgba(77,83,96,1)',
            borderColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#2129ff',
            pointHoverBorderColor: 'rgba(77,83,96,0.8)'
        },
        { // dark grey
            backgroundColor: 'rgba(77,83,96,0.2)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointHoverBackgroundColor: 'rgba(77,83,96,1)',
            borderColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#2129ff',
            pointHoverBorderColor: 'rgba(77,83,96,0.8)'
        }];

And canvas defined in html:

<canvas id="line" class="chart chart-line" chart-data="data"
                    chart-labels="labels" chart-series="series" chart-options="options" chart-colors="colors"
                    chart-dataset-override="datasetOverride" chart-click="onClick">
            </canvas>

But it does'nt made any changes on the page. I also tried "$scope.colours" instead of "$scope.colors" and "chart-colours" attribute instead of "chart-colors". Does anyone have any idea how to make it work?

Answer 1

You need to use datasetOverride

 <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"
          chart-dataset-override="ctrl.datasetOverride"
 ></canvas>   

And in controller,

 ctrl.datasetOverride = [
            {
                fill: true,
                backgroundColor: [
               "#ED402A",
               "#36A2EB",
               "#FFCE56"
                ]
            },
            {
                fill: true,
                backgroundColor: [
               "#F0AB05",
               "#36A2EB",
               "#FFCE56"
                ]
            },
            {
                fill: true,
                backgroundColor: [
               "#A0B421",
               "#36A2EB",
               "#FFCE56"
                ]
            },
            {
                fill: true,
                backgroundColor: [
               "#00A39F",
               "#36A2EB",
               "#FFCE56"
                ]
            },

            ];

DEMO