带有 Recharts 的全宽小图表

Full width tiny chart with 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>

但它没有响应。

图表周围的 space 来自容器的填充。将 <ResponsiveContainer>.

的填充设置为 0