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

chart.js tooltip example

Question

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?

Answer 1

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

Establezca el color de gridLines 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
            }   
        }]
    }
}

Answer 2

OK, no importa .. Encontré el truco:

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

Answer 3

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

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

Answer 4

Si desea que desaparezcan de manera predeterminada, simplemente puede configurar:

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

Answer 5

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