Линейная диаграмма содержит 2 линии. В начале один показан, а другой скрыт.
Кнопки переключения скрывают и показывают линии.
Есть разница между строками. Один из них анимированный, а другой нет.
Как анимировать вторую строку (та, что скрыта в начале)
в прямом эфире: https://codesandbox.io/s/holy-moon-fdq9g?file=/src/Chart.jsx
Чтобы активировать анимацию для отрисовки второй линии, вы должны загрузить ее по запросу, а не работать со свойством hide, поскольку данные уже загружены и анимация была применена первой линией (я думаю, что это выпуск в библиотеке)
Вот решение, которое можно улучшить, управляя отображением строк путем загрузки или удаления строк вместо изменения свойства отображения:
https://codesandbox.io/embed/modest-wilbur-ql18f?fontsize=14&hidenavigation=1&theme=dark
Данные уже загружены в вашем случае. Таким образом, анимация не работает во втором сценарии.