Motivation

Stacked BarChart: I want the top of each stack to have rounded corners.

What is currently possible is to provide the top most stack with upper rounded corners. That does not suffice my requirements, since the top most stack could have no data for a given x-Axis value.

The issue conceptually is that rounded edge are a property of each Cell, but they are independent of each other.

Example

const data = [
  {
    name: "Page A",
    one: 4000,
    two: 2400
  },
  {
    name: "Page B",
    one: 4000
  },
  {
    name: "Page C",
    two: 2400
  }
];

export default function App() {
  return (
    <BarChart width={500} height={400} data={data}>
      <Bar dataKey="one" stackId="a" fill="darkblue" />
      <Bar
        dataKey="two"
        stackId="a"
        fill="lightgreen"
        radius={[10, 10, 0, 0]}
      />
    </BarChart>
  );
}

Related Issues

I found two related issues, yet none of them mention this specific edge case.

(A) #3834 is about rounding the top and the bottom. This is already possible, at least if the both groups always have data.

(B) #1888 is about modifying / enhancing the rounding behaviour.

Finally, I found another related issue, which contains the solution: #3325

Workaround

As a workaround, I can preprocess the data to add a marker per row, identifying the dataKey which is the top most stack item, such as

  // Per row of data, add a marker which identifies the top most dataKey to have rounded corners.
  // The top most one, is the last one in the array that still has a value in the row.
  const dataWithMarker = dataWithIndex.map((row) => {
    const topKey = dataKeys.reduce((topMostDataKey, dataKey) => {
      if (row[dataKey] !== undefined) {
        return dataKey
      }
      return topMostDataKey
    }, "")
    return { ...row, topKey }
  })

While this works, it is not beautiful. How could we extend the API to faciliate such a behaviour?