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


simply write

    show: false

it will solve your problem


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.


try "scaleshowgridlines" : false,


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


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.


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