I'm using stacked bars, but the set of stacks is different per bar. I think this is not the use case the current design is for.

I have about 20 bars, and 20 stacks per bar. There are about 400 unique stack values, since this is a categorical hierarchy (e.g. bars are countries, stacks are cities).

So for every bar+stack combination (400x) I'm rendering a <Bar>. After rendering, each of those further contains an <Animate><g> for every bar (20x), despite only one per bar+stack combination actually containing anything graphical inside that <g> (<Rectangle><Animate><Animate><path>).

So that's unnecessarily complex for React to manage, and is unsuitable for this kind of data breakdown.

The data model per object is:

• name (the unique key on the X axis) e.g. "France"
• stack_Paris (the height of stack for Paris)
• stack_Marseille
• stack_LeMans
• etc.

I've considered remapping the data values such that I assign a number (from zero) for each per-bar stack, and giving Recharts just the indexes, and custom renderers for labelling and colouring rectangles. It's a bit messy but should reduce the complexity significantly (down to 400x rather than 400x20x)

Before I press on with this somewhat dirty workaround, I'd be interested to hear if there are any other ways I can structure this.

I'd like to raise the issue that Recharts is creating unnecessary <Animate><g> elements for missing (either null or absent) object atttributes for dataKey. It would be better if it we could skip them altogether, removing the 20x part of the complexity here.

Also, why two Animate in <Rectangle><Animate><Animate><path>?

(Also, the <Animate> elements are adding overhead to React (I've not measured how much), and would like to be able to drop them when animation isn't in use.)