Chart.js v2 - 隐藏网格线

Question

I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want:

The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , but I can't find anything about hiding those "Grid Lines".

How can I remove the grid lines?

Answer 1

I found a solution that works for hiding the grid lines in a Line chart.

Set the gridLines color to be the same as the div's background color.

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

or use

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

Answer 2

From version 3.x, onwards use this syntax. Refer to chart.js migration guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

scales: {
  x: {
    grid: {
      display: false
    }
  },
  y: {
    grid: {
      display: false
    }
  }
}

Answer 3

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

Answer 4

如果您希望它们默认消失，您可以设置：

Chart.defaults.scale.gridLines.display = false;

Answer 5

If you want to hide gridlines but want to show yAxes, you can set:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

Answer 6

OK, nevermind.. I found the trick:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

Answer 7

下面的代码仅从图表区域中删除网格线，而不是 x&y 轴标签中的网格线

Chart.defaults.scale.gridLines.drawOnChartArea = false;

Answer 8

In chartjs 3 there is a little difference in accessing this configuration. The name of the property is not gridLines , but grid , as it is shown in the official documentation:

options.gridLines was renamed to options.grid

Source: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks

Here is how it looks:

const options = {
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
  },
};

Answer 9

Please refer to the official documentation:

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

Below code changes would hide the gridLines:

scales: {
    xAxes: [{
        gridLines: {
            display:false
        }
    }],
    yAxes: [{
        gridLines: {
            display:false
        }   
    }]
}

Answer 10

An update for ChartJS 3:

  const options = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },

      y: {
        grid: {
          // display: false,
          color: 'rgba(217,143,7,0.1)',
        },
      },
    },
}

Answer 11

this did it for me on my react project

 scales: { xAxis:{ grid: { display: false } } }

i hope this helps