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

Question

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

此问题可在此处重现：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。