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:

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?

javascript chart.js2

— iSS
fonte

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