Dinamic Expenses Chart Component

Hello everyone,

So, this project was a learning experience.

Had to do a lot of research and experiment.

First, I tried using the Chart.JS library to build up the chart and, after spending a few hours trying to figure out how that library works, I gave up because I couldn't get the results I wanted, I found the documentation a little confusing and took way too long to find the correct options to do what I wanted to do.

Second, I decided to use good old Vanilla JS, I first tried to create the bar elements dinamically using the insertAdjecentHTML method and use the data provided with the JSON file. I managed to do it, I was able to do it using that method, but, soon enough, I found out that I can't (or at least I couldn't figure it out) attach eventListeners to elements created dinamically with that method, and took me quite a bit to get it to work.

Third, finally tried another approach, and create DOM elements using the createElement method and also used the data provided with the JSON. This way, I could add evenListeners to the elements and therefore apply the hover efects using JS.

So there you go, it was a journey, took waaayyy longer than I exepected but manage to do it and get it as close to the design as possible.

Any feed back is always welcome!

Happy coding 🤓