How to dynamically change the color of the bars on the chart in Chart.js

Question

I wanted to change the color of each bar of the chart according to its value. If the value is less than zero, the bar should turn red and if it is greater than zero it turns green.

function gerarGraficoDiario(dados){

    chartColor = "#FFFFFF";
    
    // General configuration for the charts with Line gradientStroke
    gradientChartOptionsConfiguration = {
        maintainAspectRatio: false,
        legend: {
            display: false
        },
        tooltips: {
          bodySpacing: 4,
          mode:"nearest",
          intersect: 0,
          position:"nearest",
          xPadding:10,
          yPadding:10,
          caretPadding:10
        },
        responsive: 1,
        scales: {
            yAxes: [{
              display:1,
              gridLines:1,
              ticks: {
                  display: true,
                  beginAtZero: true
              },
              gridLines: {
                  zeroLineColor: "transparent",
                  drawTicks: true,
                  display: true,
                  drawBorder: false
              }
            }],
            xAxes: [{
              display:1,
              gridLines:1,
              ticks: {
                  display: true,
              },
              gridLines: {
                zeroLineColor: "transparent",
                drawTicks: false,
                display: false,
                drawBorder: false
              }
            }]
        },
        layout:{
          padding:{left:0,right:0,top:15,bottom:1}
        }
    };
    
    ctx = document.getElementById('performaceDiaria').getContext("2d");
    
    gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
    gradientStroke.addColorStop(0, '#80b6f4');
    gradientStroke.addColorStop(1, chartColor);
    
    gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
    gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
    gradientFill.addColorStop(1, "rgba(249, 99, 59, 0.40)");
    
    myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Seg','Ter','Qua','Qui','Sex'],
            datasets: [{
                pointBorderColor: "#FFF",
                pointBackgroundColor: "#f96332",
                pointBorderWidth: 2,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 1,
                pointRadius: 4,
                fill: true,
                backgroundColor: [
                    'green',
                    'green',
                    'green',
                    'green',
                    'green',
                    'green',
                    'green'
                ],
                borderWidth: 2,
                data: dados
            }]
        },
        options: gradientChartOptionsConfiguration
        
    });
    
  
}

But I did not find in the documentation Chart.js something that explains how to do it.

Answer 1

You’re using JS vanilla + Charjs, right? I saw that you pass the data data parameter, I believe you can also pass a custom color array and assign to the backgroundColor. I think it will work properly this way.