Skip to content
Submitted over 2 years ago

Mobile-first solution with Flexbox

tbrownlee•350
@tbrownlee
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

First time using a local JSON file, if anyone could help me solve one of the below that would be great!!

-Border-radius not working on bottom-left, bottom-right of the bars

-Tooltip box does not go above the highest bar (the blue one)

-The numbers do not have dollar signs

Community feedback

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

    Hey there,

    I tried using chart.JS for this challenge too and couldn't get the bottom border-radius to work either, that's why I went with vanilla JS.

    I know that with JS, you could use a template literal to add the dollar sign, but with this library, not sure if you can do that.

    Marked as helpful
    1
    tbrownlee•350
    @tbrownleePosted over 2 years ago

    @DonUggioni Ah I see, I'll try going the vanilla JS route.

    Thanks!

    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