javascript - Recharts.js ResponsiveContainer显示类似于填充的空白

在Recharts中使用<ResponsiveContainer>时，它将呈现类似于填充的空白，该空白出现在其中的图表周围。

此问题可在此处重现：https://codesandbox.io/s/ykq2q0z871

[请注意<ResponsiveContainer>的红色边框和蓝色的<LineChart>之间的空格。

如何删除它，以使折线图在红色框中从一边到另一边呈现？

最佳答案

recharts上的所有图表类型都有一个margin道具，defaults可以：

{ top: 5, left: 5, right: 5, bottom: 5 }

只需将修改后的道具添加到<LineChart />即可解决此问题：

<LineChart margin={{ top: 0, left: 0, right: 0, bottom: 0 }} data={data}>

这是分叉的codesandbox。