Help needed : colors in dynamic pie chart

[MrBean14]

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

[etimberg]

@MrBean14 the colours should be an array not an object.

[MrBean14]

@etimberg Thanks for your response.
Indeed, that was my first issue.

Tried it this way now :

 var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: totalen,
                    backgroundColor: [
                        '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)'
                    ],
                    borderColor: window.chartColors.darkblue,
                }],
            },

But then, still my problem is not solved. As I said, and you can see it in the chart, it can have 20 pie pieces. Next time 100... How to make it work so that all get a different color ?

Best regards,

Davy

[MrBean14]

It would be nice to have a kind of random color selection.
I could propose to my client to get less pie pieces... :-) :-)

[JannemanDev]

This is not related to ChartJS I think. Just generate/fill X number of random colors in your chartColors array(!) where X is the length of totalen array. Pick up a Javascript tutorial on array's on how to do this.
Something like:

var arr = [];
//in a loop based on length of totalen array do
arr.push(...random color...);

See more info on array https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

[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.

[JannemanDev]

I like the color palette cycling method of @simonbrunel (third method). That way you can pick your favorite/matching colors and still have unique colors for neighboring pie pieces. Easy to setup, scales and performs well.

[MrBean14]

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