Chartjs-ChartJS Update specific bar's background colour

by

0👍

You can just pass an array to the backgroundColor bar chart dataset property (instead of a single color) where the position in the array maps to the position in the data array.

For example, if you have 3 bars and want all 3 to be a different color, just pass an array to backgroundColor where all 3 elements have a different color value.

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Car", "Bike", "Walking"],
    datasets: [{
      label: 'Fuel',
      backgroundColor: [
        chartColors.red,
        chartColors.blue,
        chartColors.yellow],
      data: [
        randomScalingFactor(), 
        randomScalingFactor(), 
        randomScalingFactor(), 
      ]
    }]
  },
  options: {
    title: {
      display: true,
      text: "Chart.js - Different Bar Colors"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    responsive: true,
  }
});

Here is a codepen example demonstrating this.

Leave a comment