javascriptchart.js2

Chart.js v2 - hiding grid lines


I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want:

Grid Lines I don't want

The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, but I can't find anything about hiding those "Grid Lines".

How can I remove the grid lines?


Solution

  • I found a solution that works for hiding the grid lines in a Line chart.

    Set the gridLines color to be the same as the div's background color.

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

    or use

    var options = {
        scales: {
            xAxes: [{
                gridLines: {
                    display:false
                }
            }],
            yAxes: [{
                gridLines: {
                    display:false
                }   
            }]
        }
    }