CODEWITHSUNDEEP
javascriptjquerycsschart.js
Jacob
Jacob

Reputation: 3698

Javascript generate random color with equivalent highlight

I'm working with charts.js library and I need to generate random colors for the charts units.

I saw a lot of answers on how to do so. Like Anatoliy answer for example.

The thing is, I need it's equivalent highlight color as well (or any close color) to fulfill the 'highlight' field of the charts.js Pie.

{
    value: 300,
    color: "#30a5ff",
    highlight: "#62b9fb",
    label: "Label"
},

Upvotes: 0

Views: 633

Answers (1)

Andrew Willems
Andrew Willems

Reputation: 12458

Here's one among many possible solutions. Get a random hue between 0 and 360. Use 100% saturation and 50% lightness for the main color, and 100% saturation and, say, 80% lightness for the "highlight" color. Just keep clicking the "Run code snippet" button to see more random colors.

document.querySelectorAll('div').forEach(d => {
  const hue = Math.floor(Math.random() * 360);
  d.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
  d.style.borderColor     = `hsl(${hue}, 100%, 80%)`;
});
div {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid 5px;
  margin: 5px;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Upvotes: 2

Related Questions