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

Question

Original Question: I have a Pie chart on my dashboard and I'm using chart.js. I have to display monthly amount belong to a category in this pie chart. I will use single color like "Yellow" for this chart and I want the darker shade for the month where the value is higher and lighter shade of yellow where the value is lower. Is this possible to achive? I tried with the below js code with no success.

Continuation to my original question, I'm trying to achive the same with the below code but not getting the desired result, can anyone check and let me know where and what I'm doing wrong?

Thanks in advance.

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

const sort_by = (field, reverse, primer) => {
 const key = primer ?
  function(x) {
      return primer(x[field])
  } :
function(x) {
  return x[field]
};
reverse = !reverse ? 1 : -1;
   return function(a, b) {
        return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
   }
}

  $(document).ready(function () {

  var ctx5 = $("#pie-chartcanvas-1");

    var amount = {
        REGISTRATION : [],

    };

    var len = data.length;

    for (var i = 0; i < len; i++) {
        if (data[i].for_month == "APRIL") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "AUGUST") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "DECEMBER") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "FEBURARY") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "JANUARY") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "JULY") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "JUNE") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "MARCH") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "MAY") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "NOVEMBER") {
            amount.REGISTRATION.push(data[i].amount);
        }
        if (data[i].for_month == "OCTOBER") {
            amount.REGISTRATION.push(data[i].amount);
        }
        else if (data[i].for_month == "SEPTEMBER") {
            amount.REGISTRATION.push(data[i].amount);
        }

    }
    var bgclr = [clr11 = "#ffffc4",
            clr10 = "#fafa92",
            clr9 = "#e5e574",
            clr8 = "#d1d160",
            clr7 = "#c7c74a",
            clr6 = "#b5b540",
            clr5 = "#a2a236",
            clr4 = "#b5b500",
            clr3 = "#919117",
            clr2 = "#606007",
            clr1 = "#333304",
            clr0 = "#1d1d02",];

    var data5 = {
        labels : ["JANUARY","FEBURARY","MARCH","APRIL","MAY","JUNE",
                   "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER",
                   "DECEMBER"],
        datasets : [
            {
                label : "Categories",  
                backgroundColor : [bgclr],
                data :[amount.REGISTRATION[4], amount.REGISTRATION[3],        
      amount.REGISTRATION[7],amount.REGISTRATION[0],amount.REGISTRATION[8],
      amount.REGISTRATION[6],amount.REGISTRATION[5],amount.REGISTRATION[1],
      amount.REGISTRATION[11],amount.REGISTRATION[10],amount.REGISTRATION[9],                               
      amount.REGISTRATION[2]],  
            }
        ],
    };  
    var chart5 = new Chart( ctx5, {
        type : "pie",
        data : data5,
        options : options5 
    });
    console.log(data);
    let dataset = chart5.data.datasets[0];
    console.log(dataset);
    let data1 = dataset.data;
    console.log(data1);

    console.log(data.sort(sort_by('amount', true, parseInt)));
    data_ord = (data.sort(sort_by('amount', true, parseInt)));            
    console.log(data_ord);
    let plus = 0;

    for (let i = 0; i < data_ord.length; i++) {
        let value = data_ord[i];                
        console.log(dataset);
        var allValues = value.amount;
        console.log(value);

                      
        bgclr = dataset.backgroundColor[data.indexOf(value)] = 
        adjust('#ffff00', plus);
        plus -= 50        
        
    }
    console.log(dataset.backgroundColor);

    chart5.update();
    },
 });

 var options5 = {
  title : {
    display : true,
    position : "bottom",
    text : "Category Graph for 2020",
    fontSize : 30,
    fontColor : "#11ece5",
    fontFamily : "calibri",
    fontStyle : "normal"
   },
    tooltips: {
    callbacks: {
        title: function(tooltipItem, data) {
            return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
            return data['datasets'][0]['data'][tooltipItem['index']];
        },                        
    },
    backgroundColor: '#FFF',
    titleFontSize: 25,
    titleFontColor: '#0066ff',
    //titleFontColor: '#ffe74b',
    bodyFontColor: '#000',
    bodyFontSize: 25,
    displayColors: true
   },
    legend : {
    display : false,
    position : "bottom"
   },
   segmentShowStroke: false

 };

Answer 1

等待大神答复