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.

Alkanet

Hey I was having the same problem as you whereby only the first bar with color. How did you solved it? – Charily

remove array [] like backgroundColor: '#3498db', //Now it will set this color as default to all the bars – Implicit

Answer 1

You need to use fillColor property in your datasets array like this - (and instead of borderColor, try strokeColor like below)

datasets: [{
    label: label,
    data: data,
    fillColor: "rgba(14,72,100,1)", // v2+ uses background color
    strokeColor: "brown",
    borderWidth: 1
}]

A full working example can be seen from one of the demos of chartjs here

Fecundate

Hi, it seems fillColor no longer works in chart.js 2. Thanks anyway though. – Alkanet

Brilliant your answer lead me to the answer. I noticed the issue, I was setting the backGroundColor to an array with only one entry rather than a simple string. Thanks a million for your help. – Alkanet

Happy to help :) – Fecundate

For reference: in the latest versions the attribute is now "backgroundColor" – Mekong

If you want to set 1 default color for the bar then remove array [] like backgroundColor: '#3498db', [] or array of color will set each bar independently – Implicit

Answer 2

On the latest version, I used backgroundColor instead of fillColor

Sofia

Answer 3

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,

Devon

Answer 4

Here is the answer from Chart.js documentation:

If you don't have any preference for colors, you can use the built-in Colors plugin. It will cycle through a palette of seven Chart.js brand colors. All you need is to import and register the plugin:

import { Colors } from 'chart.js';
Chart.register(Colors);

Allround