Chart.JS - Comparar valores entre datasets e colorir a barra baseado no resultado

[Fabio Eduardo Argenton]

Fala pessoal, preciso de ajuda num gráfico do plugin Chart JS.

Possuo um gráfico com dois datasets sendo:

1. Dataset1 “Target” (linha)
2. Dataset2 “Resultado” (barra)

Quero fazer uma comparação entre os datasets e colorir a barra na qual o valor do resultado(Dataset2) for menor do que o valor do target(Dataset2), exemplo:

 

Veja que minha linha é o Dataset1 “Target” e possui o valor 95.00 (95%)
E minhas barras são os valores do Dataset2 “Resultado” que variam dia a dia.
O que quero é: Se o valor do resultado for menor do que o target a barra fica vermelha.

[Fabio Eduardo Argenton]

Resolvido, segue exemplo:

 

<script>
  $(function () {
    //Variáveis que receberão os dados para popular o gráfico
    const mes = [];
    const resultado = [];
    const target = [];

    //Dados recebidos do res.render na rota
    '<% DTResutadoKPIMensal.forEach((row, index) => { %>'
        mes.push('<%= row.resultado_mensal %>');
        resultado.push('<%= row.ila_resultado %>');
        //Repete o target para cada bloco
        '<% DTTargets.forEach((row, index) => { %>'
        	target.push('<%= row.ila_target %>');
    	'<% }); %>'
    '<% }); %>'    

    //Define a cor baseado no resultado vs target
    const bordercolor = [];
    const backgroundcolor = [];    
    for (let i = 0; i < resultado.length; i++) {
      if (resultado[i] >= target[0] || resultado[i] >= 100) {
        //Dentro do target
        bordercolor.push('"#385E9B"')
        backgroundcolor.push('rgba(56,94,155, 0.7)')        
      } else{
        //Abaixo do target
        bordercolor.push('#9b385e')  
        backgroundcolor.push('rgba(155,56,94, 0.7)')        
      }      
    }

    //Line chart definido no canvas da página
    //var ctx = document.getElementById('tempo_stage_recebimento').getContext('2d');
    var canvas = document.getElementById('ila_mensal');
    var ctx = canvas.getContext("2d");

    var myChart = new Chart(ctx, {
      plugins: [ChartDataLabels],
      type: 'bar',

      data: {
        labels: mes,//Não esquecer
        datasets: [
          {
            data: target,//Não esquecer
            label: "Target",
            borderColor: "#DB7093",//PaleVioletRed
            borderDash: [10, 5],
            fill: false,
            backgroundColor: "rgba(219,112,147, 0.7)",
            pointStyle: 'circle',
            radius: '0',
            type: 'line',
            //Rótulo das barras
            datalabels: {
              backgroundColor: function (context) {
                if (context.dataIndex === context.dataset.data.length - 1) {
                  return context.dataset.backgroundColor;
                }
              },
              formatter: function (value, context) {
                if (context.dataIndex === context.dataset.data.length - 1) {
                  return value + '%';
                }
                return "";
              },
              borderRadius: 4,
              color: 'white',
              anchor: 'center',//start, center, end (Posição vertical)
              align: 'right',//start, center, end (Sobreposição dentro da posição vertical)
              rotation: 0,
              clamp: true,
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    size: 13
                  }
                }
              }
            },
          },
          {
            data: resultado,//Não esquecer
            label: "ILA",
            borderColor: bordercolor,
            fill: true,
            backgroundColor: backgroundcolor,
            pointStyle: 'circle',
            radius: '4',
            //Rótulo das barras
            datalabels: {
              formatter: function (value, context) {
                return value + '%';
              },
              color: '#fff',//Cor
              anchor: 'start',//start, center, end (Posição vertical)
              align: 'end',//start, center, end (Sobreposição dentro da posição vertical)
              rotation: -90,
              clamp: true,
              labels: {
                title: {
                  font: {
                    weight: 'normal',
                    size: 13
                  }
                }
              }
            },
          }
          ]
      },
      animation: true,
      options: {

        maintainAspectRatio: false,

        responsive: true,

        title: {
          display: false,
          text: 'Qtde'
        },

        legend: {
          display: false,
          position: 'bottom',
          labels: {
            boxWidth: 15
          }
        },

        tooltips: {
          enabled: true,
          mode: 'index',
          intersect: false,
          displayColors: true,
          callbacks: {
            label: function (tooltipItem, data) {
              var label = data.datasets[tooltipItem.datasetIndex].label || '';
              if (label) {
                label += ': ';
              }
              label += tooltipItem.yLabel + '%';
              return label;
            }
          }
        },

        plugins: {
          title: {
            display: true,
            text: "Graph"
          },
          legend: {
            display: false,
          },
        },

        hover: {
          mode: 'nearest',
          intersect: true,
        },

        scales: {
          xAxes: [{
            gridLines: {
              display: false,
              drawBorder: true
            }
          }],
          yAxes: [{
            display: true,
            gridLines: {
              display: true,
              borderDash: [2],
              drawBorder: false
            },
            ticks: {
              min: 0,
              max: 100,
              stepSize: 10,
              scaleStartValue: 0,
              fontSize: 10,
              callback: function (value) {
                return value + "%"
              }
            }
          }]
        },

      },
    });

  });
</script>