[XYChart]: There is no way to define rounded top corners properly

[alex-golubtsov]

Using <XYChart> and <AnimatedBarStack> / <AnimatedBarSeries>, there is no way to properly define rounded top corners.

I expect the topmost section in each column to have rounded corners. With current AnimatedBarSeries API it's not possible. Here is the example:

<AnimatedBarStack>
  {sections.map(({ key, color }, index) => (
    <AnimatedBarSeries
      radiusTop={index === values.length - 1}
      radius={14}
      key={key}
      dataKey={key}
      colorAccessor={() => color}
      data={data}
      xAccessor={xAccessor}
      yAccessor={(d) => d[key]}
    />
  ))}
</AnimatedBarStack>

• data is an array of { string: number }
• sections is an array of { key: keyof data, color: string }
• the condition index === values.length - 1 (the last section in the definition) does not work since dark-green section is not the topmost in all the columns

[davidbarker]

Could you use a rounded rectangle as a mask?

That is to say, create a rectangle with the same dimensions and positions as each stack, round the top corners of it, and then use it as a mask on each stack.

The only complication I can see might be matching the animation to the stacks, but it might be doable.