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

Question

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

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

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

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

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。