Chart.js v2 - Masquage des lignes de grille

149

J'utilise Chart.js v2 pour dessiner un graphique linéaire simple. Tout a l'air bien, sauf qu'il y a des lignes de grille que je ne veux pas:

Lignes de grille que je ne veux pas

La documentation pour Line Chart est ici: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , mais je ne trouve rien sur le masquage de ces "Grid Lines".

Comment puis-je supprimer les lignes de la grille?

javascript chart.js2 iSS
la source

Réponses:

342

J'ai trouvé une solution qui fonctionne pour masquer les lignes de la grille dans un graphique en courbes.

Définissez la gridLinescouleur pour qu'elle soit la même 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
            }   
        }]
    }
}
Irvine
la source
2
Il s'agit en fait de définir la couleur gridLines sur un 0 opacitynoir (une couleur transparente). Cela devrait donc fonctionner quelle que soit la couleur d'arrière-plan du div.
XCS
40
Ou utilisez display: false, au lieu de "color"
Irvine
4
Merci beaucoup! Si seulement la documentation était un peu plus claire à ce sujet. :)
iSS
Je voulais garder l'échelle mais perdre le quadrillage au dos du graphique, donc cette réponse n'a pas fonctionné pour moi.
adg
1
Bien que cette première réponse puisse aboutir à l'image souhaitée, c'est un peu un hack. La deuxième solution, qui définit en fait la propriété d'affichage gridLines sur false, semble être plus correcte.
Tot Zam
57 
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}
user2138568
la source
5
Cette réponse m'a permis de garder l'échelle mais de ne pas dessiner le quadrillage sur le graphique.
adg
19

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

Chart.defaults.scale.gridLines.display = false;
David
la source
12

Si vous souhaitez masquer le quadrillage mais que vous souhaitez afficher les yAxes, vous pouvez définir:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]
Kathy
la source
8

OK, tant pis .. J'ai trouvé l'astuce: 

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }
hygorbudny
la source
4

Le code ci-dessous supprime la suppression des lignes de la grille de la zone du graphique uniquement, pas celles des étiquettes des axes x et y

Chart.defaults.scale.gridLines.drawOnChartArea = false;
Ahmed Adewale
la source