Skip to content

Pie animation is interrupted and onAnimationEnd fires immediately when Legend is present #7254

Description

@ssneha1811

What is the current behavior?

When rendering a PieChart with animation enabled:

  • Without <Legend />:

    • Animation runs correctly
    • onAnimationEnd fires after animation completes
  • With <Legend />:

    • Animation is skipped
    • onAnimationEnd fires immediately

What is the expected behavior?

  • Animation should run normally regardless of whether <Legend /> is present
  • onAnimationEnd should fire only after animation completes
  • Adding <Legend /> should not affect animation lifecycle or timing
Screen.Recording.2026-04-17.at.10.12.34.PM.mov

Please provide a demo of the problem in a sandbox

https://codesandbox.io/p/sandbox/piechart-animation-breaks-when-legend-is-added-onanimationend-fires-immediately-gq5czt

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

  • Recharts version: 3.8.1
  • React version: 19.2.5
  • Browser: Chrome (latest)
  • OS: macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    animationIssues regarding animationbugGeneral bug label

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions