chart-colors not working

[mattbajorek]

When adding the attribute chart-colors to the canvas for a bar graph:

chart-colors= [{
    fillColor: 'rgb(54,172,207)',
    strokeColor: 'rgb(54,172,207)',
    highlightFill: 'rgb(54,172,207)',
    highlightStroke: 'rgb(54,172,207)'
}]

The bar colors instantly go to a grey -> rgba(0,0,0,0.1) as the global default noted in: http://www.chartjs.org/docs/#chart-configuration-colors.

It doesn't matter what inputs are in the array, but the fact that there is an array makes it go to grey. I know it is registering because the grey bar is different than the default bar color. By using:

.config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts 
    ChartJsProvider.setOptions({
      chartColors: ['#36accf']
    });
  }])

I am able to change the chart color, but not all the specific details that I want to change. Any help is appreciated. Thanks!

[SirBryan]

This is because the names have changed. "fillColor", "strokeColor", etc. no longer work.

I looked at the Chart.js documentation (see [http://www.chartjs.org/docs/#chart-configuration-colors]) and the angular-chart.js code, and found the following:

        backgroundColor: rgba(color, 0.2),
        pointBackgroundColor: rgba(color, 1),
        pointHoverBackgroundColor: rgba(color, 0.8),
        borderColor: rgba(color, 1),
        pointBorderColor: '#fff',
        pointHoverBorderColor: rgba(color, 1)

...where "color" is your rgb values.

So this means the angular-chart.js documentation needs to be updated to match. In your case,

fillColor = backgroundColor
strokeColor = borderColor

I don't know what the highlight colors would be (probably the pointHover colors).

Pro Tip:

The chart-colors attribute is just appended to the Chart.js datasets array, so you can also set other dataset attributes like "fill," "spanGaps," "linetension," and so on.

Borrowing from a solution given in #258, I pass the output of this function to $scope.chartColors, and set the canvas' chart-colors attribute to that (chartColors).

function generateColors() {
    var colors = [];
    var arrayColors = [
        "255, 231, 151",
        "255, 167, 40",
        "242, 218, 254",
        "146, 101, 194",
        "220, 220, 170",
        "206, 120, 255",
        "71, 160, 220",
        "218, 255, 0",
        "91, 200, 84",
        "255, 194, 193",
        "255, 66, 68",
        "217, 129, 80"
    ];

    for (var i = 0, countColors = arrayColors.length; i < countColors; i++) {
        var rgb = arrayColors[i];
        colors.push({
            'fill': "false",
            'backgroundColor': "rgba(0,0,0,0)",
            'borderColor': "rgba(" + rgb + ",1)",
            'pointBackgroundColor': "rgba(" + rgb + ",1)",
            'pointHoverBackgroundColor': "rgba(" + rgb + ",0.8)",
            'pointBorderColor': "#fff",
            'pointHoverBorderColor': "rgba(" + rgb + ",1)",
        });
    }
    return colors;
}

[mattbajorek]

Thanks! I got rid of highlightFill and highlightStroke. Then changed fillColor and strokeColor like you suggested and its working the exact way I wanted. I appreciate the time you took to answer this very detailed and correct answer.