Chart.js: Display only the horizontal gridline at zero index

user_8330652 0
Viewed 8120

How can I display the horizontal gridline present with zero value?

I am currently using the following code:

yAxes: [{
    gridLines: {
        display: true,
        color: [
            "rgba(0, 0, 0, 0.1)",
            "rgb(255, 255, 255)",
            "rgb(255, 255, 255)",
            "rgb(255, 255, 255)",
            "rgb(255, 255, 255)"
        ],
    },
    afterTickToLabelConversion: function (scaleInstance) {
        scaleInstance.ticks.unshift(null);
        scaleInstance.ticksAsNumbers.unshift(null);
        scaleInstance.zeroLineIndex++
        display: false
    },

This works fine when the charts are being displayed on the HTML page with a white background.

However, when the chart is saved and seen in a picture viewer, the white line comes up (I need to hide / remove these line while keeping the line at the zero position).

Example:

Example

chart.js gridlines
4 Answers
user_6734570

This also seems to work:

gridLines: {
  lineWidth: 0,
  zeroLineWidth: 1
}
user_12115270

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

gridLines: {
  color: "transparent"
}
user_153259740

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

user_39501670
Related