带有 Recharts 的全宽小图表

Question

我正在尝试使用 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>

但它没有响应。

Answer 1

图表周围的空间来自容器的填充。将 <ResponsiveContainer> 的填充设置为 0。