如何让Recharts折线图起始点与坐标轴交点间保留自定义间距

我想让折线图的起始点（Jan）和坐标轴交点之间保留自定义间距，目前尝试给XAxis加domain={["dataMin+20", "dataMax+20"]}但没效果，当前代码如下：

<ResponsiveContainer width="100%" height={403}>
  <LineChart
    data={graphData}
    margin={{
      top: 67,
      right: 30,
      left: 4,
      bottom: 0,
    }}
    barCategoryGap="26%"
  >
    <CartesianGrid
      strokeDasharray="10"
      stroke="#E8E8E8"
      strokeWidth="1px"
    />
    <XAxis
      style={{
        fontSize: selectedType === "Monthly" ? "12px" : "14px",
        fontFamily: "Inter",
        color: "#111827",
      }}
      dataKey="name"
      axisLine={{ stroke: "#E8E8E8" }}
      tickLine={{ stroke: "#FFFF" }}
      domain={["dataMin+20", "dataMax+20"]}
      interval={0}
    />
    <YAxis
      style={{
        fontSize: selectedType === "Monthly" ? "12px" : "14px",
        fontFamily: "Inter",
        color: "#111827",
      }}
      dx={-15}
      axisLine={{ stroke: "#E8E8E8" }}
      tickLine={{ stroke: "#E8E8E8" }}
      tickFormatter={(tick) => `${tick}k`}
    />
    <Line
      type="monotone"
      dataKey="revenue"
      stroke="#417898"
      activeDot={{ r: 8 }}
      fill="#417898"
    />
  </LineChart>
</ResponsiveContainer>

你遇到的问题是domain属性对类目型X轴不生效——这个属性仅适用于数值轴，而你的X轴是基于字符串类目的（比如"Jan"这类月份名称）。要实现起始点和坐标轴的自定义间距，有两种简单有效的方法：

方法1：给XAxis添加padding属性 #

直接在XAxis组件里加入padding={{ left: 30, right: 30 }}，数值可以根据你的需求调整。这个属性会在类目轴的首尾两端添加空白间距，不会影响图表整体布局：

<XAxis
  style={{
    fontSize: selectedType === "Monthly" ? "12px" : "14px",
    fontFamily: "Inter",
    color: "#111827",
  }}
  dataKey="name"
  axisLine={{ stroke: "#E8E8E8" }}
  tickLine={{ stroke: "#FFFF" }}
  interval={0}
  padding={{ left: 30, right: 30 }} // 新增行
/>

方法2：调整LineChart的margin.left #

你当前LineChart的margin.left设置为4，可以增大这个值（比如改成30），这样整个图表左侧的空白区域会增加，间接拉开起始点和Y轴的距离：

<LineChart
  data={graphData}
  margin={{
    top: 67,
    right: 30,
    left: 30, // 修改此处数值
    bottom: 0,
  }}
  // 移除无用的barCategoryGap属性（仅对柱状图生效）
>

另外，代码中的barCategoryGap对折线图没有作用，建议删除以减少冗余。

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