Javascript Load Random Colour each time

Question

I am using js to generate a graph from a bootstrap template.

This graph shows a list of appointment types & values

try {
    //bar chart
    var ctx = document.getElementById("ReferralTypeWeekly");
    if (ctx) {
      ctx.height = 200;
      var myChart = new Chart(ctx, {
        type: 'bar',
        defaultFontFamily: 'Poppins',
        data: {
          labels: ["Apt Type 1", "Apt Type 2", "Apt Type 3", "Apt Type 4", "Apt Type 5", "Apt Type 6", "Apt Type 7", "Apt Type 8", "Apt Type 9", "Apt Type 10", "Apt Type 11"],
          datasets: [
            {
              label: "Week 06",
              data: [7, 31, 47, 41, 10, 42, 3, 19, 16, 24, 0, 26],
              borderColor: "rgba(0, 123, 255, 0.9)",
              borderWidth: "0",
              backgroundColor: "rgba(0, 123, 255, 0.5)",
              fontFamily: "Poppins"
            },
            {
              label: "Week 07",
              data: [10, 67, 112, 57, 21, 39, 9, 23, 30, 26, 9, 54],
              borderColor: "rgba(0,0,0,0.09)",
              borderWidth: "0",
              backgroundColor: "rgba(123, 255, 0,0.5)",
              fontFamily: "Poppins"
            },
            {
              label: "Week 08",
              data: [4, 47, 93, 58, 21, 29, 6, 10, 32, 30, 6, 33],
              borderColor: "rgba(0,0,0,0.09)",
              borderWidth: "0",
              backgroundColor: "rgba(255, 0, 123,0.5)",
              fontFamily: "Poppins"
            }
          ]
        },
        options: {
          legend: {
            position: 'top',
            labels: {
              fontFamily: 'Poppins'
            }

          },
          scales: {
            xAxes: [{
              ticks: {
                fontFamily: "Poppins"

              }
            }],
            yAxes: [{
              ticks: {
                beginAtZero: true,
                fontFamily: "Poppins"
              }
            }]
          }
        }
      });
    }


  } catch (error) {
    console.log(error);
  }

on the lines

borderColor: "rgba(0, 123, 255, 0.9)",

and

backgroundColor: "rgba(0, 123, 255, 0.5)",

I would like to have these randomly generated from a preset list, however as a unique colour for each set, but identical colors for the borderColor and backgroundColor for each value.

I searched around on here but don't even know where to begin here.

Some of my other graphs use multiple datasets (not just 2 like this example).

Looking forward to peoples suggestions on where I start

Cheers

UPDATE : HERE IS A PHOTO OF THE GRAPH

Answer 1

You can splice the array at a random index.

var predefinedList = ["0,0,0", "255,255,255", "255,0,0", "0,255,0", "128,128,128", "0,128,0"];

function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

document.querySelector("#test").addEventListener("click", function() {
  console.log(getRandomColor());
});

<button id="test">New Color</button>

If you want to add random values to predefinedList you can do (This can create up to 256 unique colors):

var start = Date.now();

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return [r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",");
});

console.log("Milliseconds elapsed: " + (Date.now() - start));

console.log(predefinedList);

You can combine both to get this:

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return `rgb(${[r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",")})`;
});


function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

var container = document.querySelector("#container");
var color = getRandomColor();

while (color){
  var newDiv = document.createElement("div");
  newDiv.setAttribute("style", `background-color: ${color};`);
  container.appendChild(newDiv);
  color = getRandomColor();
} 

#container>div {
  width: 20px;
  height: 20px;
  float: left;
}

<div id="container"></div>

You could also create the r,b and g arrays in the following way:

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function createIndexFunction(start, multiplier) {
  return function(val, index) {
    return start + index * multiplier;
  }
}

var r = fillArray(26, createIndexFunction(0, 10));
// 26 (how many elements to create)
// 0 (start with r: 0 )
// 10 (skip 10 records r: 0, r: 10 ... r: 250)
var g = fillArray(26, createIndexFunction(200, 1));
// 26 (how many elements to create)
// 0 (start with g: 200 )
// 1 (don't skip any records)
var b = fillArray(26, createIndexFunction(50, 5));
// 26 (how many elements to create)
// 0 (start with b: 50 )
// 5 (skip 5 records b: 50, b: 55 ... b: 175)

console.log(r);
console.log(g);
console.log(b);