Recharts：当另一个 Bar 具有 stackId 时浮动条形图？

Question

我希望前三个值堆叠在第一列。

我尝试遵循 Creating ranged bar chart using recharts 但自定义形状并没有解决问题。

我能得到的最接近的是这个配置

      <Bar dataKey="value1" stackId="a" fill="#8884d8" />
      <Bar dataKey="value2" stackId="a" fill="#222" />
      <Bar dataKey="value3" stackId="a" fill="goldenrod" />
      <Bar dataKey="value4" fill="#58a0df" />
      <Bar dataKey="value5" fill="salmon" />
      <Bar dataKey="total" stackId="a" fill="#8908a7" />

将所有 Bar 的 stackId 设置为相同使其看起来像这样

Answer 1

@piaseckimaks 回复了我的 GitHub 问题

解决方法是在另一个栏下方创建一个不可见的栏。

<Bar dataKey="value4" stackId="a" fill="transparent" legendType="none" />

const data = [
  {
    name: "Column 1",
    value1: 3,
    value2: 2,
    value3: 1
  },
  {
    name: "Column 2",
    invisible: 6,
    value4: 4
  },
  {
    name: "Column 3",
    invisible: 10,
    value5: 1
  },
  {
    name: "Total",
    total: 11
  }
];

https://codesandbox.io/s/stacked-bar-chart-forked-jeuv0?file=/src/App.tsx:332-351

https://github.com/recharts/recharts/issues/2524

Recharts：当另一个 Bar 具有 stackId 时浮动条形图？

Recharts: Floating Bar Chart when another Bar has a stackId?

recharts