Skip to content
Submitted over 2 years ago

Responsive bar chart component with JSON data fetching

Elaine•11,400
@elaineleung
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

Just updated my solution as I realized that I had mistaken the highlighted bar to be the day with the largest amount, when in fact it should be the current day (as in, in real life). I also made the component responsive even at smaller sizes instead of just having two fixed widths; this normally is not so hard to do since content tend to be filling up the container, but in this content here is smaller than the container. To make sure the container doesn't collapse, I used the responsiveness of flex-wrap to ensure it would be at the size I need.

Community feedback

  • Amaefula Joel•440
    @Amaefula-JoelPosted over 2 years ago

    I'm really interested in knowing how you make your solution match almost identically to the design. What app do use? If it isn't an app, how do you make the perfect comparison

    1
    Elaine•11,400
    @elaineleungPosted over 2 years ago

    @Amaefula-Joel Thank you for the comment! I don't use anything special, no tools and no libraries, just my eyes. I would line up my browser on top of the image and then compare how much more or less I'd need to adjust; usually I'd check the elements vertically first and then horizontally. I also make sure to only use rem; I used to have a mix of things depending on what the property is, but now I find it's so much easier to just have the same unit.

    1
    Amaefula Joel•440
    @Amaefula-JoelPosted over 2 years ago

    @elaineleung I hope I can my train my eyes to do this. I'll try to do more of this in future challenges

    0
  • Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    Hello Elaine,

    I have a question about your code, as I'm currently working on this solution, I need some help =D

    ${info.amount * 0.1595}em => how did you arrive at this value? The one you are multiplying the info amount by.

    Curious about how you got there!

    Thank you =)

    1
    Elaine•11,400
    @elaineleungPosted over 2 years ago

    @DonUggioni Hi Renan, sorry I just saw this! What I did was, I just lined up the bottom axes of the design image and of the div with my bar graph after I had the bars showing, and then just compare the top of the bars to see how much more I need to change to get my bar matching the design. Since I was using em I just stuck with it, but you can use any unit of course.

    1
    Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    @elaineleung Hi there,

    Thanks for the reply =)

    I will give that a try and see how it goes =D

    0
    Elaine•11,400
    @elaineleungPosted over 2 years ago

    @DonUggioni Good luck, let me know how it goes :)

    0
    Renan Tiscoski•1,240
    @DonUggioniPosted over 2 years ago

    @elaineleung Hey there, finally finished the chart, if you want to, please have a look and let me know what you think =D

    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