Skip to content
Submitted over 2 years ago

Expenses Chart - HTML CSS & JavaScript / Chart.js

Adam Baker•90
@ABaker14791
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

Few problems still to solve.

  • border-radius only on top of bars
  • hover tag not same as design

Community feedback

  • Sean Red•635
    @seanred360Posted over 2 years ago

    I fixed the 'border-radius only on top of bars' issue. You needed to add a borderSkipped property to the dataSets object. The default is true, but you need it to be set to false. Look at the example here https://www.chartjs.org/docs/3.4.1/samples/bar/border-radius.html. I made a pull request on your GitHub here https://github.com/ABaker14791/Expenses-Chart-FE-Mentor/pull/1. You can view the changes and merge it to your code if you wish.

    Marked as helpful
    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