Chart.js v2 - ocultar líneas de cuadrícula

149

Estoy usando Chart.js v2 para dibujar un gráfico de líneas simple. Todo se ve bien, excepto que hay líneas de cuadrícula que no quiero:

La documentación para el gráfico de líneas está aquí: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , pero no puedo encontrar nada sobre cómo ocultar esas "líneas de cuadrícula".

¿Cómo puedo eliminar las líneas de la cuadrícula?

javascript chart.js2

— iSS
fuente

341

Encontré una solución que funciona para ocultar las líneas de la cuadrícula en un gráfico de líneas.

Establezca el gridLinescolor para que sea el mismo que el color de fondo del div.

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

o usar

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

— Irvine
fuente

2

En realidad, esto establece el color de gridLines en 0 opacitynegro (un color transparente). Entonces esto debería funcionar independientemente del color de fondo del div.

— XCS

40

O use display: false, en lugar de "color"

— Irvine

44

¡Muchas gracias! Si tan solo la documentación fuera un poco más clara sobre este tema. :)

— iSS

Quería mantener la escala, pero perder las líneas de la cuadrícula en la parte posterior del gráfico, por lo que esta respuesta no funcionó para mí.

— Adg

1

Si bien esta primera respuesta puede llegar a la imagen deseada, es un truco. La segunda solución, que en realidad establece la propiedad de visualización gridLines en false, parece ser más correcta.

— Tot Zam

57

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

— usuario2138568
fuente

55

Esta respuesta me permitió mantener la escala pero no dibujar las líneas de la cuadrícula en el gráfico.

— Adg

19

Si desea que desaparezcan de forma predeterminada, puede configurar:

Chart.defaults.scale.gridLines.display = false;

— david
fuente

12

Si desea ocultar líneas de cuadrícula pero desea mostrar yAxes, puede establecer:

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

— Kathy
fuente

8

OK, no importa .. Encontré el truco:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

— hygorbudny
fuente

4

El siguiente código elimina las líneas de la cuadrícula del área del gráfico, no solo las de las etiquetas de los ejes X e Y

Chart.defaults.scale.gridLines.drawOnChartArea = false;

— Ahmed Adewale
fuente