While using <ResponsiveContainer>
in Recharts, it renders padding-like whitespace which appear around the chart inside it.
This issue is reproducible here:
[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?
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?
Share Improve this question edited Apr 23, 2019 at 21:19 Rahul Desai asked Apr 23, 2019 at 21:11 Rahul DesaiRahul Desai 15.5k20 gold badges88 silver badges144 bronze badges1 Answer
Reset to default 12All 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.