[Chartjs]-Chart.js repeating colors?

by

3👍

✅

First you could define an array of colors. Once you know the size of your data, you can determine the background colors as follows:

var colors = ['red', 'orange', 'yellow', 'green', 'blue']; 
...
var bgColors = [];
for (var i = 0; i < data.length; i++) {
  bgColors.push(colors[i % colors.length]);  
}

This is a simplified example:

<html>

<head>
    <title>Polar Area Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div style="width: 90%">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    var colors = ['red', 'orange', 'yellow', 'green', 'blue']; 
    var data = [4, 5, 4, 2, 8, 7, 6, 8, 5, 4, 1, 3, 7];
            
    window.onload = function() {
       var bgColors = [];
       for (var i = 0; i < data.length; i++) {
         bgColors.push(colors[i % colors.length]);  
       }
       var ctx = document.getElementById('canvas').getContext('2d');
       window.myChart = new Chart(ctx, {
          type: 'polarArea',
          data: {
             datasets: [{
                label: 'Promo Codes',
                data: data,
                backgroundColor: bgColors
             }]
         },
         options: {
            responsive: true,
         }
       });
    };
    </script>
</body>

</html>

Leave a comment