Chartjs-How to change background of chart in chart.js with condition

1👍

backgroundColor is not array of string but just string.

backgroundColor: "#f38b4a".

Also Dataset is your array of objects which should represent the dataset of each developer. I am giving you an example.

var barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: data.map((row) => row.lastedit),
    datasets: [{
      label: 'Alex',
      data: [12, 19, 3, 17, 28, 24, 7],
      backgroundColor: "rgba(255,0,0,1)"
    }, {
      label: 'Bob',
      data: [30, 29, 5, 5, 20, 3, 10],
      backgroundColor: "rgba(0,0,255,1)"
    },
    {
      label: 'John',
      data: [30, 29, 5, 5, 20, 3, 10],
      backgroundColor: "rgba(255,0,255,1)"
    }]
  }
});

data: [12, 19, 3, 17, 28, 24, 7] => this is array of line edits let’s say Alex did each day, the index represents day number and value of that index represents the lines edited by Alex.

let’s say on day 2 (index 1 or date: 15-02-2022 as show in pic) alex wrote 19 lines of code.

this snippet should return something like this
enter image description here

Leave a comment