Expenses chart component - Responsive Sass/Styled Components | ReactJS

I'm sure there is an easier way to do what I achieved with styled-components (Passing the amount and converting to px) but it's what I could remember, any easier way?

Also curious about using the pseudo states and display: none while having a transition. I specifically couldn't get the hover state to both change the display and opacity while using a transition, very specific but something I did struggle with.

Other than that, this was a very fun challenge. Thank you Frontend Mentor!