删除 Recharts SimpleAreaChart 中的顶行

问题描述

我使用的是 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>

编辑：

解决方法

Recharts 中的这些短线称为刻度线。您可以使用 tickLine 轴属性删除它们：

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

不看源码，很难判断为什么会出现上面的横线。有可能是轴的内边距是通过 padding 属性指定的，或者 Recharts 错误地定义了边界，这里您可以尝试通过 domain 属性设置边界：

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

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