CODEWITHSUNDEEP
javascriptchart.js
jiraiya
jiraiya

Reputation: 997

How to set default colour for bars in Chart.js

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.

Upvotes: 14

Views: 30840

Answers (4)

sahinakkaya
sahinakkaya

Reputation: 6056

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);

Upvotes: 0

mp77
mp77

Reputation: 428

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

Upvotes: 18

aahoogendoorn
aahoogendoorn

Reputation: 464

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,

Upvotes: 1

Swaleh Matongwa
Swaleh Matongwa

Reputation: 886

On the latest version, I used backgroundColor instead of fillColor

Upvotes: 1

Related Questions