How to set default colour for bars in Chart.js

Question

This seems stupidly trivial but try as I might I cannot seem to find how to set a default colour for bars in chart.js.

My charts is taking its data from an ajax request and the chart is rendering just fine. However neither updating Chart.defaults.global.defaultColor nor adding defaultColor to the dataset as an option has any effect.

I would very much appreciate anyone pointing me in the right direction here.

$.ajax({
type: 'GET',
async: true,
url: "{{route('stats.monthlyData')}}",
dataType: 'json',
success: function (response) {
    var labels = [];
    var data = [];
    $.each(response, function () {
        labels.push(this.month_name);
        data.push(this.record_count);
    });
    drawChart('# of Records', labels, data);
}
});

function drawChart(label, labels, data){
    var ctx = document.getElementById("chart");
    //Chart.defaults.global.defaultColor = "#3498db"; Tried this but does not work
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: label,
                data: data,
                //defaultColor: ['#3498db'], Tried this but does not work
                backgroundColor: ['#3498db'], //Only the first bar gets set
                borderColor: [],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

}

Thanks.

UPDATE

In case it helps anyone, the issue was that I was setting the backgroundColor property to an array with only a single entry. If you want to default it for all columns then it should only be set to a string. Credit to @mp77 for leading me to notice this issue.

Answer 1

You have used an array of colors. Chart.js can use that, but will then use a color per bar. If you want to have all bars in the same color, don't use an array, but a single value. Like this:

backgroundColor: "#33AEEF",

If you want each bar to have a different color, use the array instead, like this:

backgroundColor: ["#FF0000", "#00FF00", "#0000FF", "#33AEEF"],

I've also set the border to 0, but that's a personal preference, like this:

borderWidth: 0,