How to use set the color for each bar in a bar chart using chartjs?

Question

I want the bars in this graph to have different colors that I choose myself. I don't want to use random colors for the bars (or set of bars).

var ctx = $("#myBarChart").get(0).getContext("2d");
var data = {
labels: ["a","b","c","d","e","f","g"],
datasets: [
    {
        label: "My First dataset",
        /*fillColor: "rgba(84,255,159,1)",
        highlightFill: "rgba(84,255,159,0.75)",*/
        data: [5,3, 4, 2, 1, 3, 1]
    },
]};

var myBarChart = new Chart(ctx).Bar(data);
var width = $('canvas').parent().width();
$('canvas').attr("width",width);
new Chart(ctx).Bar(data);

possible duplicate of [Different color for each bar in a bar chart; ChartJS](http://stackoverflow.com/questions/25594478/different-color-for-each-bar-in-a-bar-chart-chartjs) — Awena, Apr 01 '15 at 03:45
I have seen that question. That question is regarding random color of each bar and my question is about color of my choice for each bar — sairaj, Apr 03 '15 at 17:46

Raja Khoury · Answer 1 · 2015-04-01T03:52:42.510

try this

var myBarChart = new Chart(ctx).Bar(dataset, options);  

 var dataset = {
    labels: ["a", "b", "c", "d", "e", "f", "g"], // Optional Labels
    datasets: [  // array of data
        {
            label: "Bar - Set 1",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "Bar - Set 2",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
 //ect..
};

No! I want different colors(of my choice) for each bar in a single Bar-Set — sairaj, Apr 03 '15 at 17:50

score 0 · Answer 2 · answered Mar 30 '15 at 06:44

You can access the datasets and their single bars using an indexer (like an array):

myBarChart.datasets[0].bars[0].fillColor = "#2ECC71";
myBarChart.datasets[0].bars[0].highlightFill = "#58D68D";
myBarChart.datasets[0].bars[1].fillColor = "#3498DB";
myBarChart.datasets[0].bars[1].highlightFill = "#5DADE2";

score 0 · Answer 3 · answered Jan 22 '18 at 19:17

In ChartJS 2.4.0, you may assign a different color for each element in your dataset[idx].data array

i.e.

....
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["#5e4fa2", "#745998", "#8a638d", "#a06d83", "#b57678", "#cb806e", "#e18a63"]

Link to reference: http://www.chartjs.org/docs/latest/charts/bar.html

How to use set the color for each bar in a bar chart using chartjs?

3 Answers3