Chartjs-Change color according to data in pie chart.js

by

0👍

I am not seeing anywhere in the code you posted, the mention of specifying color scheme…

Per the official documentation found @ http://www.chartjs.org/docs/latest/, you need to do the following — tweak it as needed

data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},

put the above before options: {

0👍

You can call this function which generates random colors for each bars:

 var randomColorGenerator = function () {
           return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
        };

var barChartData = {
               labels: ["Your label sets"],
               datasets: [
                   {
                       label: "My First dataset",
                       fillColor: randomColorGenerator(),
                       strokeColor: randomColorGenerator(),
                       highlightFill: randomColorGenerator(),
                       highlightStroke: randomColorGenerator(),
                       data: [Your datasets]
                   }
               ]
           };

Leave a comment