Skip to content
Submitted about 1 year ago

Dynamic expenses chart component

Saad Hisham•1,750
@Saad-Hisham
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi there🙋‍♂️, I really enjoyed solving this. Here is what I found difficult:

Making the height of every div dynamic: I discovered that it's determined by multiplying the amount in the JSON file by "2.86478227655". This was a bit challenging for me, especially since I'm more familiar with working in React rather than vanilla JavaScript. Nonetheless, it was a good challenge, and any feedback is welcome.

Community feedback

  • Efere Precious•580
    @justEferePosted about 1 year ago

    to actually get the exact dynamic height. You need to find what percent is the .json amount value to the total height of the chart div.. for example. if the total height of the div is 200px, and the .json amount is 23.4. you then need to find 23.4% of 200 and use the value as fill value for the div.

    ${(23.4/100)*200}px will give you the exact height for any div and make it dynamic.

    I hope this was helpful.

    Marked as helpful
    0
    Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    ty bro I used Photoshop to get the size of every bar and divide it on JSON amount code for the same bar and all bars gave me the value 2.86 so I guessed this is the equation @justEfere

    0

Please log in to post a comment

Log in with GitHub

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