如何使 recharts 条形图响应式全宽

Question

当我更改网站的宽度时，我的重新图表的条形图不会延伸。 如何使图表的宽度完全拉伸？ 我尝试删除宽度和高度，然后它就消失了。我还尝试在 ResponsiveContainer 中设置最小宽度或高度，但这不起作用。请帮助我。

<ResponsiveContainer width="100%" height="100%">
        <div>
            <BarChart
              className='m-auto'
              data={data}
              margin={{
                top: 20,
                right: 30,
                left: 30,
                bottom: 5,
              }}
              width={900}
              height={400}
              >
              <XAxis
                dataKey, etc,.
              />

Answer 1

您可以用

<div></div>

包裹响应式容器。对其应用宽度或高度

<div></div>

。

<div style={{ height: "20rem" }}>
  <ResponsiveContainer width="100%" height="100%">
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 20,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <XAxis dataKey="name"></XAxis>

      <YAxis tick={(tickObject) => customTick(tickObject)}></YAxis>

      <Line dataKey="uv" type="monotone" stroke="#0000FF"></Line>
      <Line dataKey="pv" type="monotone" stroke="#ff223f"></Line>

      {/* Tooltip Implementation */}
      <Tooltip
        content={<CustomTooltip active={false} payload={[]} label={""} />}
      />

      {/* Legend Implementation */}
      <Legend content={<RenderLegend />} verticalAlign="top" />
    </LineChart>
  </ResponsiveContainer>
</div>

这个解决方案对我有用，你可以在这里找到代码片段

Answer 2

您可以像这样添加高度并删除其他高度和宽度属性，如下所示。

<ResponsiveContainer height="400">
        <BarChart
          className='m-auto'
          data={data}
          margin={{
            top: 20,
            right: 30,
            left: 30,
            bottom: 5,
          }} 
          >
          <XAxis
            dataKey, etc,.
          />

我希望这可以帮助遇到此问题的任何人。