-1

Eu queria mudar a cor de cada barra do gráfico de acordo com seu valor. Se o valor for menor do que zero, a barra deve ficar vermelha e se for maior do zero fica verde.

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

Mas eu não encontrei na documentação chart.js algo que explique como se faça.

1 Resposta 1

0

Vc está usando JS vanila + CharJS, correto? Vi que vc passa por parâmetro os dados os dados, acredito que vc possa também passar um array de cores personalizado e atribuir ao backgroundColor. Acho que irá funcionar corretamente dessa forma.

1
  • Eu esperava algo dentro do gráfico para mudar a cor, mas sua resposta funcionou também. Valeu!! Commented 19/10/2020 às 18:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .