ChartJS change background color by conditions

by

👍:-2

If I’m understanding correctly you want to be able to colour each individual column. If you put all the data in the same dataset you can use backgroundColor as below to define a colour order.

HTML:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <script src='https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js'></script>
  </head>

  <body style="background:black">
    <div class="chart-container">
      <canvas id="myChart"></canvas>
    </div>
  </body>

</html>

JS:

const ctx = document.getElementById('myChart').getContext('2d');
this.MYCHART = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ['0', '1', '2', '3', '4'],
    datasets: [{
      data: [100, 100, 100, 100, 100],
      backgroundColor: [
        '#FFF',
        '#FFF',
        '#eee',
        '#eee',
        '#888',
      ]
    }]
  }
});

Leave a comment