Chartjs-Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthly

by

0👍

✅

function adjust(color, amount) {
      return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
    }

Check out here

function adjust(color, amount) {
  return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['value 1', 'value 2', 'value 3', 'value 4'],
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: [],
      data: [33, 57, 65, 42]
    }],
  }
});

let dataset = myChart.data.datasets[0];

let data = dataset.data;
let data_ord = [...data].sort();

let plus = 0;

for (let i = 0; i < data_ord.length; i++) {
  let value = data_ord[i];
  dataset.backgroundColor[data.indexOf(value)] = adjust('#fdd500', plus);
  plus -= 30
}
myChart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart" height="150"></canvas>

Leave a comment