Skip to content
Submitted almost 3 years ago

Responsive & Animated Expenses Chart Component using Chart.JS

accessibility, fetch, fresh, progressive-enhancement, chart-js
P
LVL 4
Krishna Vishwakarma•1,390
@KrishnaVishwakarma1595
A solution to the Expenses chart component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, everyone

Responsive and animated solution for this challenge with so much learning for me. Learned to integrate a third-party library for data visualization.

What I learned

  • Writing semantic HTML5 markup with HTML accessibility
  • Working with CSS Grid & Flexbox
  • Mobile/Desktop first workflow
  • Animating elements
  • Importing JSON data into script file using fetch
  • Visualizing JSON data using a third-party library - Chart.JS

Resources

Let me know your comments and suggestions of improvement, Thanks!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Krishna Vishwakarma’s solution.

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