Frontend Mentor | Expenses-chart-component coding challenge solution

Solution retrospective

Hey Everyone,

Sorry my files are a complete mess, this challenge taught me that I really, really need to organize my files better. :P

I did have one question, I was unable to figure out how to set the height of the bars with the animation, which is why the animation goes to 100% than jumps down to where the height is actually at. Hope that makes sense, and any help with this would be great.

Thanks!

Community feedback

Rian Mendes• 100

@devrianmendes

Posted almost 2 years ago

I set the height of the bar by taking the day value in the .json document and multiplying it by 2.5, so all the values in the document multiplied by 2.5 would give less than 200px height for each bar, even if the value changed later, the height of the bars would change according to the new values. If it was difficult to understand, take a look at my github in the challenge repository and look at the handleBar function.

Kent O'Sullivan• 1,870

@12Kentos

Posted almost 2 years ago

@devrianmendes Thanks for the comment. :)

I was able to get the data out of the .json document, and set the height of each of the bars to that. The issue I have is when you look at the site, the height of each bar goes to 100% of it's container, then down to what they are supposed to be. I was having issues setting the animation of the bar growing and shrinking to the actual height I want it to be from the .json file instead of growing to 100% of the container height if that makes sense?

Expenses-chart-component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community