Крошечная диаграмма во всю ширину с Recharts

Я пытаюсь прикрепить диаграмму к границе моего контейнера с Recharts. Я не использую никакую ось, только линию. Я не могу избавиться от маржи.

Простое воспроизведение здесь: https://jsfiddle.net/jdcpqg5k/2

import React from "react";
import {
  ComposedChart,
  ResponsiveContainer,
  Tooltip,
  Area,
  Line,
} from "recharts";

const Chart = ({ data }) => (
      <div style={{ height: 300, width: 300 }}>
        <ResponsiveContainer>
          <ComposedChart 
            data={data}
            margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
          >
            <Tooltip />
            <Area type="monotone" dataKey="count" />
            <Line type="monotone" dataKey="total" />
          </ComposedChart>
        </ResponsiveContainer>
      </div>
  );

Грязный обходной путь - установить маржу следующим образом:

<ComposedChart
    data={data}
    margin={{ top: 0, right: -15, left: -15, bottom: 0 }}
>
    <Area type="monotone" dataKey="total" />
</ComposedChart>

Но не реагирует.


person Almaju    schedule 21.08.2020    source источник


Ответы (1)


Пространство вокруг диаграммы связано с заполнением контейнера. Установите отступ на 0 для <ResponsiveContainer>.

person Gowshik Prabhu    schedule 21.08.2020