Hover Transition effect for Bar Cell not working #6891
Description
What is the current behavior?
In library version 3.6.0, the transition effect on hover does not work. The active bar's color changes without animation.
2026-01-15.15.30.56.mov
Version 2.15.1.
Smooth color change
What is the expected behavior?
2026-01-15.15.27.52.mov
Please provide a demo of the problem in a sandbox
The code is roughly as follows:
I save the state of the active cell using the useState hook.
I animate the hover using transition: 'fill 0.3s ease-in-out',.
It's interesting that on version 3.1.0, if isAnimationActive={false}, then everything works. If isAnimationActive={true}, it doesn't. In version 3.6.0, isAnimationActive doesn't work in both states.
<Bar
key={dataKey}
dataKey={dataKey}
stackId={stackId}
radius={0}
stroke='none'
strokeWidth={0}
isAnimationActive
shapeRendering='crispEdges'
yAxisId={yAxisId}
mask={variant === 'dashed' ? `url(#${BAR_BG_PATTERN_STRIPED_MASK_ID})` : undefined}
>
{data.map((dataItem, index) => (
<Cell
key={`bar-${index}`}
fill={
activeBarName === dataItem.name
? basicColorsConfig[activeBarBackground]
: basicColorsConfig[barBackground]
}
style={{
transition: 'fill 0.3s ease-in-out',
}}
/>
))}
</Bar>
Recharts version: 3.6.0 (but is reproduced on 3.x.x)
Browser: Chrome 143.0.7499.193 (arm64)
Metadata
Metadata
Assignees
Labels
No labels