Recharts CartesianGrid配置：水平线与垂直线样式区分设置

直接用两个CartesianGrid组件分别控制水平线和垂直线的样式就行，具体代码示例如下：

import { LineChart, CartesianGrid, XAxis, YAxis, Line } from 'recharts';

// 示例数据
const chartData = [
  { name: '周一', value: 12 },
  { name: '周二', value: 28 },
  { name: '周三', value: 18 },
  { name: '周四', value: 35 },
  { name: '周五', value: 22 },
];

function CustomGridChart() {
  return (
    <LineChart width={600} height={320} data={chartData}>
      {/* 配置水平线：仅显示水平线，设为虚线 */}
      <CartesianGrid 
        horizontal={true} 
        vertical={false} 
        strokeDasharray="3 3" 
        stroke="#e0e0e0"
      />
      {/* 配置垂直线：仅显示垂直线，默认实线 */}
      <CartesianGrid 
        horizontal={false} 
        vertical={true} 
        stroke="#e0e0e0"
      />
      <XAxis dataKey="name" />
      <YAxis />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
}

export default CustomGridChart;

关键参数说明： #

• horizontal/vertical：开关对应方向的网格线，true显示、false隐藏
• strokeDasharray：设置虚线样式，"3 3"代表3px实线加3px空白的循环组合，你可以根据需求调整数值（比如"5 2"是更长的虚线）
• stroke：设置网格线的颜色，按需修改即可

如果需要给每条网格线单独设置样式，也可以用horizontalLines或verticalLines属性，但统一样式的话，用两个组件的方式最省事。

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