Chartjs random colors for each part of pie chart with data dynamically from database

Question

I want to set dynamically a color for each part of Pie Chart. Since the chart is dynamically created from database I want for each part that is added to the chart(from database) a different color.

I was trying to do this:

$(document).ready(function() { $.ajax({ url: "http://localhost/chartjs/projects_chart.php", method: "GET", success: function(data) {     console.log(data);     var ict_unit = [];     var efficiency = [];     var dynamicColors = function() {         var r = Math.floor(Math.random() * 255);         var g = Math.floor(Math.random() * 255);         var b = Math.floor(Math.random() * 255);         return "rgb(" + r + "," + g + "," + b + ")";     };      for (var i in data) {         ict_unit.push("ICT Unit " + data[i].ict_unit);         efficiency.push(data[i].efficiency);          var coloR=dynamicColors();     }     var chartData = {          labels: ict_unit,         datasets: [{             label: 'Efficiency ',             //strokeColor:backGround,              backgroundColor: [coloR],              borderColor: 'rgba(200, 200, 200, 0.75)',             //hoverBackgroundColor: 'rgba(200, 200, 200, 1)',             hoverBorderColor: 'rgba(200, 200, 200, 1)',             data: efficiency         }]     };      var ctx = $("#my-canvas");     var barGraph = new Chart(ctx, {         type: 'pie',         data: chartData     }) }, error: function(data) {      console.log(data);    },   });  }); 

But I only get one color for the first part of the pie chart.

Could you help me?

Answer 1

You should create a separate array for colors ( just like the ict_unit and efficiency ), instead of assigning a random color value each time to the coloR variable.

Here is the revised version of your code :

$(document).ready(function() {     $.ajax({        url: "https://jsonblob.com/api/jsonBlob/a7176bce-84e0-11e7-8b99-016f34757045",        method: "GET",        success: function(data) {           console.log(data);           var ict_unit = [];           var efficiency = [];           var coloR = [];             var dynamicColors = function() {              var r = Math.floor(Math.random() * 255);              var g = Math.floor(Math.random() * 255);              var b = Math.floor(Math.random() * 255);              return "rgb(" + r + "," + g + "," + b + ")";           };             for (var i in data) {              ict_unit.push("ICT Unit " + data[i].ict_unit);              efficiency.push(data[i].efficiency);              coloR.push(dynamicColors());           }           var chartData = {                labels: ict_unit,              datasets: [{                 label: 'Efficiency ',                 //strokeColor:backGround,                   backgroundColor: coloR,                   borderColor: 'rgba(200, 200, 200, 0.75)',                 //hoverBackgroundColor: 'rgba(200, 200, 200, 1)',                 hoverBorderColor: 'rgba(200, 200, 200, 1)',                 data: efficiency              }]           };             var ctx = $("#my-canvas");           var barGraph = new Chart(ctx, {              type: 'pie',              data: chartData           })        },        error: function(data) {             console.log(data);        },     });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>  <canvas id="my-canvas"></canvas>

Answer 2

An example snippet for rgb color picker between 235 and 52

const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52);  const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;  console.log(randomRGB());

Resource:

• https://stackoverflow.com/a/45772013/5994546
• https://stackoverflow.com/a/7228322/5994546
• https://www.google.com/search?q=color+picker