CODEWITHSUNDEEP
javascriptchart.js
William234234
William234234

Reputation: 535

How do I change the bar colors in chart.js barcharts?

I have created a barchart with chart.js but all the bars are grey colored. How do I make them all blue? Heres my code:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dates,
    datasets: [
      { 
        data: values
      }
    ]
  }
});

From reading the documentation it seems that I need to change the property: backgroundColor. So there should be a line somewhere with something like:

backgroundColor: 'blue'

or something similar. I haven't been able to find an answer to this and all the examples in the documentation are way more complicated than what I need.

Upvotes: 0

Views: 47

Answers (1)

Matthew Meppiel
Matthew Meppiel

Reputation: 996

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dates,
    datasets: [
      { 
        backgroundColor: ["#0000FF"],
        data: values
      }
    ]
  }
});

Upvotes: 1

Related Questions