Recharts.js ResponsiveContainer显示类似填充的空格

Question

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

这个问题在这里可以重现：https://codesandbox.io/s/ykq2q0z871

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

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

Answer 1

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。