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

Question

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:

Answer 1

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