Submitted about 2 years ago

Animated & Dynamically Rendered Expenses Chart with CSS GRID

animation, framer-motion, react

visualdennis•8,395

@visualdenniss

A solution to the Expenses chart component challenge

Preview Code

Solution retrospective

A challenge i did while ago, but i've added now some animations on top.

The height of expense bars are dynamically calculated. The bar with highest value is also calculated dynamically and displayed in blue.

Hope you guys like the final result! 🐱

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on visualdennis's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord