Different color for each bar in a bar chart; ChartJS

by

As of v2, you can simply specify an array of values to correspond to a color for each bar via the backgroundColor property:

datasets: [{
  label: "My First dataset",
  data: [20, 59, 80, 81, 56, 55, 40],
  backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], 
}],

This is also possible for the borderColor, hoverBackgroundColor, hoverBorderColor.

From the documentation on the Bar Chart Dataset Properties:

Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.

More Related Contents:

  1. How to display data values on Chart.js
  2. Dynamically update values of a chartjs chart
  3. How to add text inside the doughnut chart using Chart.js?
  4. Chart.js — drawing an arbitrary vertical line
  5. Click events on Pie Charts in Chart.js
  6. Destroy chart.js bar graph to redraw other graph in same
  7. ChartJS – Different color per data point
  8. Chart.js – draw horizontal line
  9. How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
  10. How to put rounded corners on a Chart.js Bar chart
  11. How to clear a chart from a canvas so that hover events cannot be triggered?
  12. ChartJS: datalabels: show percentage value in Pie piece
  13. Limit labels number on Chart.js line chart
  14. How to set ChartJS Y axis title?
  15. Remove x-axis label/text in chart.js
  16. How to create rounded bars for Bar Chart.js v2?
  17. Chart.js v2: How to make tooltips always appear on pie chart?
  18. chart.js load totally new data
  19. chart.js Failed to create chart: can’t acquire context from the given item
  20. Chartjs Bar Chart showing old data when hovering
  21. Custom Legend with ChartJS v2.0
  22. How to change colours for Angular-Chart.js
  23. How to add images as labels to Canvas Charts using chart.js
  24. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  25. ng2-charts update labels and data
  26. Horizontal stacked bar chart with chart.js
  27. Chart JS custom tooltip option?
  28. Chart.js Line, different fill color for negative point
  29. How do I put this on Real-Time? I already put (async: True) but it doesnt work
  30. XML parsing of a variable string in JavaScript

Leave a Comment