Sunday, 12 November 2023

Chart.js Pie with best random background color

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