Skip to content
Submitted over 2 years ago

Expense Chart Component | Tailwind & Alpine

Josh•400
@burrijw
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

Pretty happy with this! The tooltips and chart height are dynamic based on the given JSON data.

The hover effects could be better. Moving really fast across the chart results in some undesired behavior. Any tips to prevent multiple tooltips would be great. I used alpinejs directives for those and probably could do better.

Community feedback

  • Mithat Ucar•90
    @ObjectOrientedMindsetPosted over 2 years ago

    Hey, hover effects doesnt work when app got resized might want to check that out.

    0
    Josh•400
    @burrijwPosted over 2 years ago

    @ObjectOrientedMindset Thanks! I actually did that on purpose since mobile/touch devices typically don't support hovering. I should consider a way to show the tooltips in that situation, tho.

    1

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