Chart.js v2 - masquer les lignes de la grille

Question

J'utilise Chart.js v2 pour dessiner un graphique linéaire simple. Tout semble correct, 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 qui permette de masquer ces "lignes de la grille".

Comment puis-je supprimer les lignes de la grille ?

Answer 1

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

Définissez le gridLines doit être la même que la couleur d'arrière-plan de la division.

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
            }   
        }]
    }
}

Answer 2

À partir de la version 3.x, utilisez cette syntaxe. Consultez le guide de migration chart.js : https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

 scales: {
  x: {
      grid:{
       display:false
           }
     },
  y: 
     {
   grid:{
    display:false
        }
     }
         }

Answer 3

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

Answer 4

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

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

Answer 5

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

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