Skip to content
Submitted almost 2 years ago

Expenses Chart Component

Bryan Li•3,530
@Zy8712
A solution to the Expenses chart component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Created this with ChartJS in a few hours. Had to search up alot as I wasn't familiar with this library. Two issues I wasn't able to fix was the location of the tooltip popup location and the centering of the text inside the popup. Hope someone is able to explain to me as to how to fix this. Thanks.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Jackson Whiting•360
    @jacksonwhiting

    Hi,

    Nice job on the project. I'm not sure how the chart library works that you used, but I struggled with centering the tooltip and not having it change the width of the bars. In the example, the tooltip is wider than the individual bars so I didn't want the tooltip to cause the bar to expand

    Because of this I positioned the tooltip with position: absolute and use a negative top value to put it above the bar itself.

    I hope that helps.

    Jackson

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