Submitted about 2 years ago

Responsive expenses chart component using react,sass and vitejs

Brandon• 290

@branalex94

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Expenses chart component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had a lot of issues implementing the chart bars, as I couldn't properly give them the size required, as well as in the live site the bars are even smaller than on development. Is there a better way to create those bars as to give them a reasonable size? Thank you very much iin advance!

Community feedback

mubizzy• 1,520

@mubizzy

Posted about 2 years ago

Excellent job on this challenge! your report has a few issues though:

wrap everything in your body in <main> or use semantics
it is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region.

Hope it helps:)...don't forget to mark it as helpful 👍

Marked as helpful

FalejevV• 500

@FalejevV

Posted about 2 years ago

Hi. IDK if my solution is great but i did it using % height.

Using JS you search a day that has the most money spent, that will be "Top one" with cyan color and it will be 100% of height.
Then you loop through each day and calulate % difference from the "Top bar". ( For example Top bar is 100$. Is has 100% height. Another bar is 60$, so it will have 60% of height. )
Pass calulated % as prop to bar "Height". I hope my bad explanation helped :P

Marked as helpful

Please log in to post a comment

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