web-dev-qa-db-fra.com

Chart.js v2 - masquage des lignes de la grille

J'utilise Chart.js v2 pour dessiner un graphique à courbes simple. Tout va bien, sauf qu'il y a des lignes de grille que je ne veux pas:

Grid Lines I don't want

La documentation pour le graphique en courbes est ici: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , mais je ne trouve rien sur le fait de cacher ces "grille" Lignes".

Comment puis-je supprimer les lignes de la grille?

101
iSS

J'ai trouvé une solution qui permet de masquer les lignes de la grille dans un graphique à lignes.

Réglez la couleur gridLines sur la même couleur que la couleur d’arrière-plan du div.

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

ou utiliser

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}
250
Irvine
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}
17
user2138568

Si vous voulez qu'ils disparaissent par défaut, vous pouvez simplement définir:

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

Si vous souhaitez masquer les lignes de la grille mais que vous souhaitez afficher yAxes, vous pouvez définir:

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

OK, tant pis .. j'ai trouvé le truc:

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