Recharts.js ResponsiveContainer showing padding-like whitespace

Question

While using <ResponsiveContainer> in Recharts, it renders padding-like whitespace which appear around the chart inside it.

This issue is reproducible here: https://codesandbox.io/s/ykq2q0z871

[Please note the space between the red border of the <ResponsiveContainer> and the blue <LineChart>.]

How do I remove that so that the line chart renders from edge-to-edge in the red box?

Answer 1

All Chart types on recharts have a margin prop, which defaults to:

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

Just adding the modified prop to <LineChart /> should fix the issue:

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

Here is the forked codesandbox.