[Chartjs]-Chart.js: Display only the horizontal gridline at zero index

10👍

These settings worked for me:

gridLines: {
  color: "transparent",
  display: true,
  drawBorder: false,
  zeroLineColor: "#ccc",
  zeroLineWidth: 1
}

http://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

5👍

This also seems to work:

gridLines: {
  lineWidth: 0,
  zeroLineWidth: 1
}

2👍

The other answers weren’t working for me, I believe because how you do this has changed with Chart.js 3.x

To achieve the chart in the question in 3.x, you need the below options object.

  const options = {
    scales: {
      x: {
        grid: {
          lineWidth: 0,
          drawBorder: false,
        }
      },
      y: {
        grid: {
          lineWidth: context => context.tick.value == 0 ? 1 : 0 //Set only 0 line visible

        }
      }
    }

More info that helped me solve this
Chart.js how to use scriptable options

0👍

Great solution from Ted Whitehead. I found this also works with simply;

gridLines: {
  color: "transparent"
}

Leave a comment