[Chartjs]-Remove the vertical line in the chart js line chart

by

110👍

✅

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

17👍

There’s a new global option that was released with the new version of Chart.js two days ago.

var options = {
    scaleShowVerticalLines: false
}

15👍

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.

4👍

options : {
            scales: {
                yAxes: [{
                    gridLines: {
                        lineWidth: 0,
                        color: "rgba(255,255,255,0)"
                    }
                }]
            }
    };
Charts.js v2.0

2👍

try "scaleShowGridLines" : false,

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.

-3👍

Simply write

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

It will solve your problem

Leave a comment