score:107

Accepted answer

the following applies to chart.js 2.*.

if you only have one x-axis, whether the vertical grid lines (that are related to this x-axis) are displayed or not, is specified by the boolean value of options.scales.xaxes[0].gridlines.display. to be more precise, the following chart options disable the display of vertical grid lines for the single x-axis case.

options : {
    scales : {
        xaxes : [ {
            gridlines : {
                display : false
            }
        } ]
    }
}

score:-1

simply write

 options:{  
 grid:{
    show: false
   }, 
}

it will solve your problem

score:1

i think you can seperate x and y axis.

  axes: {
        xaxis: {
            ticks: ticks,
            tickoptions: {showgridline:false}
        },
        yaxis: {
            tickoptions: {showgridline:true}
        }
    }

hope this can help you.

score:2

try "scaleshowgridlines" : false,

score:5 

options : {
            scales: {
                yaxes: [{
                    gridlines: {
                        linewidth: 0,
                        color: "rgba(255,255,255,0)"
                    }
                }]
            }
    };
charts.js v2.0

score:9

the above answers seem outdated since they did not work in chartjs 3.4.1 (probably lower versions as well) for me.

you can now use the following:

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

it's self-explanatory, but to remove horizontal lines, you can replace the x with y.

score:18

there's a new global option that was released with the new version of chart.js two days ago.

var options = {
    scaleshowverticallines: false
}

Related Query

More Query from same tag