ChartJS with Dynamic Colors

by Hifni Nazeer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>


<div id='canvasContainer' class='chart'>
  <canvas id="myChart"></canvas>
</div>

CSS

.chart {
  width: 100%;
  height: 100%;
  border: solid 1px red;
}

JavaScript

alert(dynamicColors());
//var canvas = document.getElementById('myChart');
//var ctx =  canvas.getContext("2d");
var ctx = $("#myChart");
console.log(ctx);
var ichart = new Chart(ctx, {
  type: "doughnut",
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      backgroundColor: [
       dynamicColors(),
       dynamicColors(),
       dynamicColors()
      ],
      data: [300, 50, 100]
    }]
  }
});

function dynamicColors() {
  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 + ")";
};