javascript - Recharts - 如何不插入值区域图

Question

嗨，我遇到了 Recharts 库的问题。

我的数据集呈现为绿色和浅蓝色堆叠的面积图元素，以 Xaxis 值 = 03 结束，但面积图元素是针对 X 轴值 03 - 04 进行插值的。

你知道我怎么能设法在 03 上结束这些面积图元素（只需删除红色三角形中呈现的部分）。

我尝试为没有相关数据的数据条目提供 0 和 null 值并删除数据键

单个面积图元素的示例：

<Area
  dataKey="claims_closed_volume"
  stackId="1"
  fill="#52C41A"
/>

标签： javascriptreactjsrecharts

Answer 1

如果我正确理解这一点，您将希望将该XAxis组件作为兄弟组件添加到您的Area组件中。该XAxis组件具有一个domain属性，您可以使用该属性定义要呈现的值的范围。

X轴 | Recharts - 查看文档！

示例代码：

<AreaChart width={500) height={200} data={data}>
  <Area
    dataKey="claims_closed_volume"
    stackId="1"
    fill="#52C41A"
  />
  <XAxis type="number" domain={[0, 3]} />
</AreaChart>