Chart.js v2 - ocultando linhas de grade

149

Estou usando o Chart.js v2 para desenhar um gráfico de linhas simples. Tudo parece bem, exceto que existem linhas de grade que eu não quero:

Linhas de grade que eu não quero

A documentação para o gráfico de linhas está aqui: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , mas não consigo encontrar nada sobre como ocultar essas "linhas de grade".

Como posso remover as linhas de grade?

iSS
fonte

Respostas:

341

Encontrei uma solução que funciona para ocultar as linhas de grade em um gráfico de linhas.

Defina a gridLinescor como igual à cor de fundo da div.

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

ou use

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}
Irvine
fonte
2
Na verdade, isso está configurando a cor gridLines para 0 opacitypreto (uma cor transparente). Portanto, isso deve funcionar independentemente da cor de fundo da div.
XCS
40
Ou exibição uso: false, em vez de "cor"
Irvine
4
Muito obrigado! Se apenas a documentação fosse um pouco mais clara sobre esse assunto. :)
iSS 18/04/19
Eu queria manter a escala, mas perder as linhas de grade no verso do gráfico para que esta resposta não funcionasse para mim.
adg
1
Embora essa primeira resposta possa chegar à imagem desejada, é um pouco difícil. A segunda solução, que realmente define a propriedade de exibição gridLines como false, parece estar mais correta.
Tot Zam
57
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}
user2138568
fonte
5
Essa resposta me permitiu manter a escala, mas não desenhar as linhas de grade no gráfico.
adg
19

Se você deseja que eles sejam removidos por padrão, você pode definir:

Chart.defaults.scale.gridLines.display = false;
david
fonte
12

Se você deseja ocultar linhas de grade, mas deseja mostrar yAxes, é possível definir:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]
Kathy
fonte
8

OK, deixa pra lá .. Encontrei o truque:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }
hygorbudny
fonte
4

O código abaixo remove as linhas de grade da área do gráfico, mas não as que estão nos rótulos dos eixos x e y

Chart.defaults.scale.gridLines.drawOnChartArea = false;
Ahmed Adewale
fonte