Chart.js: отображение только горизонтальной линии сетки при нулевом индексе

Question

Как я могу отобразить горизонтальную линию сетки с нулевым значением?

В настоящее время я использую следующий код:

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

Это прекрасно работает, когда диаграммы отображаются на странице HTML с белым фоном.

Однако, когда график сохраняется и отображается в средстве просмотра изображений, появляется белая линия (мне нужно скрыть / удалить эту линию, сохраняя ее в нулевом положении).

Пример:

Answer 1

Эти настройки работали для меня:

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

http://www.chartjs.org/docs/latest/axes/styling.html

Answer 2

Кажется, это тоже работает:

gridLines: {
  lineWidth: 0,
  zeroLineWidth: 1
}

Answer 3

Другие ответы не сработали для меня, я считаю, потому что то, как вы это делаете, изменилось с Chart.js 3.x

Чтобы получить диаграмму в вопросе в 3.x, вам нужен объект опций ниже.

Дополнительная информация, которая помогла мне решить этот Chart.js, как использовать параметры сценария

Answer 4

Отличное решение от Теда Уайтхеда. Я обнаружил, что это также работает с просто;

      gridLines: {
  color: "transparent"
}