我是一个新的开发和尝试做一个项目，我创建了一个网页，其中有价格范围过滤器，并有一个图表链接到该价格范围过滤器。我正在尝试做的是改变我的chartJ标签的背景颜色根据游侠过滤器。我希望只有在给定范围内的标签显示橙色，其他标签应显示浅粉红色，但在这里，当我改变背景颜色后，给了一个条件，所有标签的颜色得到改变，但我希望只有标签落在过滤器范围内改变颜色。
trying to achieve range filter in this

let canvasElement = document.getElementById("productChart");

 const dataPoints = [21, 0, 19, 3, 5, 0, 2, 3, 10, 4, 6, 7, 2, 0, 0, 0, 24, 30, 32, 45, 44, 22, 
 21, 10, 7, 5, 4, 3, 1, 0, 0];

  const labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 
  27, 28, 29, 30, 31]

 const backgroundColor = 'rgba(255, 99, 71, 0.3)';

 const newBackgroundColor = 'rgba(255, 99, 71, 1)';

  let config = 
       {
        type: 'bar',
        data: {
        labels: labels,
        datasets: [{
            barPercentage: 0.5,
            barThickness: 5,
            maxBarThickness: 12,
            minBarLength: 2,
            // label: 'Number of Phones',
            data: dataPoints, //price
            backgroundColor: backgroundColor,
            borderColor: [
                'rgba(255, 99, 71, 0.2)',
            ],
            borderWidth: 1,
            borderRadius: 5,
            // borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        scales: {

            x: {
                ticks: {
                    display: false, //this will remove only the label
                },
                grid: {
                   display:false,
                   borderColor: 'black',  // <-- this line is answer to initial question
                   borderWidth:2,
                  }    
                },
            y: {
                    display: false, //this will remove only the label 
            },  
        },
        plugins: {
          legend: {
            display: false,
          },

          tooltip: {   
           enabled: false,
           displayColors: false,
           padding: 10,
           yAlign: 'top',
            },
        },  
    }
}

 let productChart = new Chart(canvasElement, config)

 const start = document.getElementById('start')
 const end = document.getElementById('end')

function updateMin(range) {
   const minValue = labels.slice(range.value - 1, end.value);  
   let newLabels = productChart.config.data.labels
   for(let i = 0; i < newLabels.length; i++){
      value = newLabels[i];
      if (minValue.includes(value)){ 
        productChart.config.data.datasets[0].backgroundColor=newBackgroundColor;
         }
   }  

   end.min = range.value
   productChart.update();
}