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

问题描述

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

我尝试关注 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" />

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

解决方法

@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