[Chartjs]-Chartjs background color multiple Dataset

by

2👍

✅

In V2 Chart.js did not support auto rollover for array collors, so if your array is shorter as the data length it will fallback to the default color for the remaining data entries.

You have 3 ways of fixing it:

  • Removing the square brackets so its just a normal color (See example below)
  • Providing an array full of colors with the same length as your data array
  • Update to V3, although there are some major braking changes so if you want to do this please read the migration guide so you can change your code correctly
<body>
  <canvas id="canvasx5" width="100" height="100"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript">
  var dataname = ['Arif', 'Choirul', 'Rexy'];
  var dataquo = [2, 2, 1];
  var datapo = [0, 0, 3];
  var ctx = document.getElementById('canvasx5');

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: dataname,
      datasets: [{
          label: 'QUO',
          fill: true,
          backgroundColor: 'rgba(255, 99, 132, 0.8)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
          data: dataquo
        },
        {
          label: 'PO',
          fill: true,
          backgroundColor: 'rgba(75, 192, 192, 0.8)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1,
          data: datapo
        }
      ]
    },
    borderWidth: 1,
    options: {
      legend: {
        display: true,
      },
      scales: {
        xAxes: [{
          stacked: false,
          barPercentage: 0.8,
          gridLines: {
            offsetGridLines: true
          }
        }],
        yAxes: [{
          stacked: false,
          ticks: {
            beginAtZero: true,
            stepSize: 2,
            min: 0
          }
        }]
      }
    }
  });
</script>

Leave a comment