Chartjs-Trying to change background color in chart js filter

by

0👍

You could use a scriptable options for backgroundColor options. Based on the argument, context.index (see here the doc: https://www.chartjs.org/docs/latest/general/options.html#scriptable-options) you can decide at runtime which color to use.
In the below snippet, changing the stepper values, the chart will change the background colors.
I have used part of your code. Instead of using the stepper, you can use your slider or what you are using.

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)';  

const from = document.getElementById("from");
const to = document.getElementById("to");

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
  labels: labels,
  datasets: [{
      //barPercentage: 0.5,
      //barThickness: 5,
      //maxBarThickness: 12,
      //minBarLength: 2,
      data: dataPoints,
      backgroundColor(ctx) {
        const fromValue = parseFloat(from.value);
        const toValue = parseFloat(to.value);
        const value = ctx.index + 1;
        if (value >= fromValue && value <= toValue) {
          return newBackgroundColor;
        }
        return backgroundColor;
      },
      borderColor: 'rgba(255, 99, 71, 0.2)',
      borderWidth: 1,
      borderRadius: 5,
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        ticks: {
          display: false,
        },
        grid: {
          display:false,
        }    
      },
      y: {
        display: false, 
      },  
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {   
       enabled: false,
      },
    },  
  }
});
from.addEventListener('click', function() {
  myChart.update();
});
to.addEventListener('click', function() {
  myChart.update();
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
    From:
    <input type="number" id="from" min="1" max="31" value="1"/>
    To:
    <input type="number" id="to" min="1" max="31" value="31"/>
  </body>
</html>

Leave a comment