Submitted 12 months ago

Expenses bar chart component using JSON data

chart-js, react, vite, tailwind-css

Duncan Chege•340

@duncan-chege

A solution to the Expenses chart component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I've completed this project in a short period. I'm getting used to tailwind CSS
I've learned to use Chart js to create dynamic and static web graphs
It wasn't necessary but I calculated the expenses as a way to test myself
I used a parent and child component in the project. I shared the total expense sum data from my child's component to my parent's component. This helped me learn about "lifting the state up"

What challenges did you encounter, and how did you overcome them?

Understanding the chart js documentation on specifics like hiding labels & grid lines, and resizing tooltips wasn't straightforward but chatGPT helped me get what I needed
I was confused about sharing data from a child component to a parent component but through research, I understood the concept

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Duncan Chege'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