Chart.js Bar Multiple Colors

March 18, 2020
new Chart(ctx, {
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [
      {
        label: 'Income',
        backgroundColor: ["red", "orange", "yellow"],
        data: [10, 15, 20]
      }
    ]
  }
})

or

const chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};

new Chart(ctx, {
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [
      {
        label: 'Income',
        backgroundColor: [chartColors.red, chartColors.orange, chartColors.yellow],
        data: [10, 15, 20]
      }
    ]
  }
})
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.