Recharts.js ResponsiveContainer, отображающий пробелы в виде отступов

Question

При использовании <ResponsiveContainer> в Recharts он отображает пробелы, похожие на отступы, которые появляются вокруг графика внутри него.

Эта проблема воспроизводима здесь: https://codesandbox.io/s/ykq2q0z871

[Обратите внимание на расстояние между красной границей <ResponsiveContainer> и синим <LineChart>.]

Как мне удалить это, чтобы линейный график отображался от края к краю в красномкоробка

Answer 1

Все типы графиков на recharts имеют margin проп, который по умолчанию до:

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

Простое добавление измененной опоры в <LineChart /> должно решить проблему:

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

Вот раздвоенные коды и поле .