Skip to content
Submitted over 2 years ago

A responsive bar chart using D3 and React with Typescript

Vincenzo Marcovecchio•1,085
@VincenzoMarcovecchio
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

D3 is very versatile but a bit hard to learn. I wanted to complete this challenge to practice a bit. I could have made the hover feature better but went for the title solution. I think I can make it work while fetching dynamic data.

Community feedback

  • Razha Jamsik Syah•700
    @Razha90Posted over 2 years ago

    • i see your line is thick , you can make it a little this with opacity: 0.5;

    • And you must try to repair HTML issues from FronEndMentor.

    <iframe src=https://www.casafraine.com/d3-responsive-bar-chart-with-react-and-typescript allow=geolocation style=width:100vw;height:100vh width=100% height=100% frameborder=0>

    • What is This :)
    1
  • Vincenzo Marcovecchio•1,085
    @VincenzoMarcovecchioPosted over 2 years ago

    Thank you so much for your answer

    Yeah I should fix the errors and be more concern to the designs

    One question, is it asking for your position the iframe ? I totally forgot to remove it

    FEM doesn't allow urls other than the ones they have whitelisted, this can be some kind of bypass? not really, but I just wanted to throw my solution in there. And also because I had d3 installed there

    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