I have some data that will be visualized in Pie Chart form.
However, I want 2 adjacent colors not to be identical. For example, if I have 3 data then I don't want them to have the background colors #90EE90, #A1FFA1, and #FF0000 because the colors #90EE90 and #A1FFA1 have a bad contrast score according to coolors.co.
let randomColor = () => {
let characters='0123456789ABCDEF';
let randomString='';
for (let i=0; i<6; i++) {
let randomIndex=Math.floor(Math.random()*characters.length);
randomString+=characters.charAt(randomIndex);
}
return '#'+randomString;
}
let round = (num) => Math.round(num*100)/100;
let chart = null;
$('#generate').click(()=>{
let data = [];
let labels = [];
let pieces = $('#pieces').val();
for(let i=0; i<pieces; i++) {
labels.push(randomColor());
data.push(round(1/pieces));
}
if(chart) chart.destroy();
chart = new Chart($('#chart'), {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: labels,
borderWidth: 0
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (context) => {
return context.parsed;
}
}
}
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
<input id="pieces" type="number" value="20" />
<button id="generate">Generate Chart</button>
</div>
<canvas id="chart"></canvas>Can you help me generate some random background colors but adjacent colors have a good contrast score or don't hurt the eyes?
from Chart.js Pie with best random background color
No comments:
Post a Comment