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:

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
source

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
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
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
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
source

8

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

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

— hygorbudny
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
source