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

Question

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

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

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

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

Answer 1

所有图表类型都有recharts一个marginprop，默认为：

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

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

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

这是分叉的codesandbox。