Help needed : colors in dynamic pie chart

Hi,

I’m creating a pie chart but I don’t know the number of labels at moment of development. Data is taken from databases and calculated dynamically. Meaning today there can be 20 labels, tomorrow 30.

Currently I see that all pieces of the pie have the same color. I don’t know how to set the creation of the graph so that each label gets an owner color. It may also be dynamic but nice if all different.

My code now :

   <script>

        window.chartColors = {
            red: 'rgb(255, 0, 0)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(0, 163, 51)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)',
            darkblue: 'rgb(0,0,255)'
        };

        var color = Chart.helpers.color;

        var data_viewer = <?php echo json_encode($resultaten); ?>;
        //alert(data_viewer);
        var myObj = JSON.parse(data_viewer);

        var totalen = [];
        var labels = [];
        var aantallen = [];

        for (x in myObj) {
            labels.push(x);
            totalen.push(myObj[x].totaal);
            aantallen.push(myObj[x].aantal);
        }

        var pieChartData = {
            labels: labels,
            datasets: [{
                data: totalen,
                backgroundColor: chartColors,
                borderColor: window.chartColors.darkblue,
                borderWidth: 1,
            }]
        };

        var ctx = document.getElementById('myChart').getContext('2d');

        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: pieChartData,
            options: {
                legend: {
                    position: 'top',
                },
          }
      });

    </script>

PS I have reused the color script from a bart chart I made before. So I hoped I could reuse.

Result is looking like this now :

Any place where I can find more info on this ?

Best regards and thanks in advance,

Davy

[simonbrunel]

@MrBean14 As @JanOonk said, you can pick whatever color lib and generate yourself the palette you want based on how much data you have. However, it’s not very handy to work with arrays, we need to implement scriptable options in all controllers (currently only implemented in the bubble chart). Then it will be really easy to implement your use case:

//////////// NOT IMPLEMENTED YET! //////////////////

backgroundColor: function(context) {
  return whateverColorLib.generate(context.dataIndex);
}

// or

backgroundColor: function() {
   return 'rgb('
      + Math.round(Math.random() *255) + ','
      + Math.round(Math.random() *255) + ','
      + Math.round(Math.random() *255) + ','
      + ')';
}

// or

var palette = [
 'rgb(255, 159, 64)',
 'rgb(255, 205, 86)',
 'rgb(0, 163, 51)',
 'rgb(54, 162, 235)',
 'rgb(153, 102, 255)',
 'rgb(201, 203, 207)',
 'rgb(0,0,255)'
]

backgroundColor: function(context) {
  return palette[context.dataIndex % palette.length];
}

I’m not sure Chart.js will ever implement default colors, I would rather see these theming features built in an external plugin.

[MrBean14]

Thanks for all the help. It is working now. Will close this issue !