删除 Recharts SimpleAreaChart 中的顶行

Question

我使用的是 Recharts 2.0.9，我几乎可以设计面积图的样式，但问题是当我将 axisLine 设置为 false 时，仍然有一条短线，看起来很奇怪。 Y 轴上还添加了一条额外的顶线。也许有人会知道如何隐藏那些短线和顶线？

<ResponsiveContainer width="100%" height={124}>
  <AreaChart
    data={data}
    margin={{
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
    }}>
    <CartesianGrid vertical={false} />
    <YAxis
      type="number"
      domain={[60, 90]}
      ticks={[60, 70, 80, 90]}
      height={111}
      interval={0}
      tick={{ fontSize: 11 }}
      width={20}
      padding={{ top: 10 }}
      axisLine={false}
      tickLine={false}
    />
  </ResponsiveContainer>

编辑：

Answer 1

Recharts 中的这些短线称为刻度线。您可以使用 tickLine 轴属性:

删除它们

<XAxis tickLine={false} />
<YAxis tickLine={false} />

不看源代码，很难说为什么会出现上面的横线。有可能轴的padding是通过padding属性指定的，或者Recharts错误定义了边界，这里可以尝试通过domain[=22=设置边界]:

<YAxis type="number" domain={['dataMin', 'dataMax']} />

见https://recharts.org/en-US/api/YAxis#domain

删除 Recharts SimpleAreaChart 中的顶行

Remove top line in Recharts SimpleAreaChart

recharts