Basic Bar Chart - Using random colors every time you land on the page.

by canvasjs

HTML

<script src="https://canvasjs.com/wp-content/uploads/misc/int-builds/canvasjs-1.4.0-beta-int3.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var newColorSet = [];
var randTimes = Math.ceil(Math.random() * 15);
if (randTimes < 4) {
    randTimes = 4;
}
for (var _k = 0; _k < randTimes; _k++) {
    var rr = Math.ceil(Math.random() * 255);
    var gg = Math.ceil(Math.random() * 255);
    var bb = Math.ceil(Math.random() * 255);

    if (rr < 25) {
    rr += 10;
    }
    if (gg < 25) {
    gg += 10;
    }
    if (bb < 25) {
    bb += 10;
    }
    
    colorSet = "#" + rr.toString(16) + gg.toString(16) + bb.toString(16);
    newColorSet.push(colorSet);
}
//console.log(newColorSet);
CanvasJS.addColorSet("randColorSet",newColorSet);
var chart = new CanvasJS.Chart("chartContainer", {
              colorSet: "randColorSet",
              title:{
                  text: "Basic Bar Chart - CanvasJS"              
             },
              data: [              
              {
// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                  type: "bar",
                  dataPoints: [
                  { label: "apple", y: 70 },
                  { label: "orange", y: 15 },
                  { label: "banana", y: 85 },
                  { label: "mango", y: 40 },
                  { label: "grape", y: 38 }
                  ]
              }
              ]
          });
//console.log(chart);
chart.render();