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:

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?

iSS
fuente

Respuestas:

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