Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses chart component using Flexbox, reCharts of reactjs

#react
Ashar Mahmood• 40

@ashardeveloper

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have used a Barchart of reChart with react js. But It doesn't allow me to customize the current day's bar highlighted in a different color than the other bars. If you have done it, Kindly tell me about your way of doing it. Thanks

Community feedback

Ekure Edem• 260

@astraldev

Posted

Honestly, I think it would have been better if you used plain CSS for that by setting the height of the barto be the price in percentage tho as in my own solution at least, you'll have more control over the bars....

Then if the price is greater than 50, change the colour....

You can check out my solution here

https://www.frontendmentor.io/solutions/expenses-chart-component-with-vuejs-4fUiJTIs_P

Marked as helpful

0

Ashar Mahmood• 40

@ashardeveloper

Posted

@astraldev Thank you so much. It is helpful.

0
Ekure Edem• 260

@astraldev

Posted

@ashardeveloper My pleasure :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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