如何在Highcharts中同时显示X轴与Y轴网格线？

Hey there! I totally get it—Highcharts defaulting to only Y-axis grid lines can be a bummer when you need both axes' grids to make your data easier to parse. Let’s break down exactly how to fix this, step by step.

Enable X-Axis Grid Lines #

By default, Highcharts sets gridLineWidth: 0 for the X-axis (that’s why those lines don’t show up out of the box). To turn them on, all you need to do is set this property to a positive number (usually 1 for standard thickness) in your X-axis configuration. You can also tweak the style to match your chart’s look if you want.

Here’s a quick example:

Highcharts.chart('container', {
  xAxis: {
    gridLineWidth: 1, // This enables the X-axis grid lines
    // Optional: Customize the grid line style
    gridLineColor: '#e0e0e0', // Light gray color
    gridLineDashStyle: 'ShortDash' // Dotted/dashed line instead of solid
  },
  // Your other chart config (title, series, etc.)
  series: [{
    data: [12, 24, 18, 30, 22]
  }]
});

Show Both X & Y Axis Grid Lines #

Since the Y-axis already has gridLineWidth: 1 enabled by default, you just need to make sure the X-axis has its gridLineWidth set as above. If you’ve previously modified the Y-axis and turned off its grid lines, just reset gridLineWidth to 1 for the Y-axis too.

Here’s a complete example with both axes’ grids visible and styled consistently:

Highcharts.chart('container', {
  xAxis: {
    gridLineWidth: 1,
    gridLineColor: '#f0f0f0'
  },
  yAxis: {
    gridLineWidth: 1, // Explicitly set to ensure it's visible (default is 1)
    gridLineColor: '#f0f0f0'
  },
  title: {
    text: 'Chart with Both X & Y Grid Lines'
  },
  series: [{
    data: [8, 15, 12, 20, 17]
  }]
});

Extra Tips for Customization #

• Adjust gridLineWidth to make lines thicker or thinner (e.g., 2 for bolder lines)
• Use gridLineDashStyle to switch between solid, dashed, or dotted lines—valid values include Solid, ShortDash, Dot, LongDash, etc.
• Play with gridLineColor to match your chart’s color scheme (use hex codes, RGB, or named colors)

内容的提问来源于stack exchange，提问作者Sona Mathew