Expenses Chart Solution. HTML, CSS and JavaScript

Hello Paula,

The chart component looks good on desktop screen, but there are few issues with it as given below.

• The chart doesn't seem to be very responsive, because on small screens the chart width is becoming too small to hold the bar chart.
• I see that you're using a chart library to draw the chart, I tried using chart.js, but I couldn't make it work and look like the design, since I had no experience with it, so I dropped that and drew the chart from scratch using inline styling. The only suggestion I can provide here is that, if you're not experienced with the library, try not to use it and try to solve the problem in a different way. This way you'll get to learn many new things and also how to approach a problem without using libraries.
• Regarding the usage of semantic tags, you can wrap the chart component inside a main tag and the attribution inside a footer tag.
• Coming to the script, you can put JS code in a different file and link to it in the head section of the html file, this way the code looks more organized and easy to maintain.

I hope the above points are helpful and I hope to see more of your work, good luck😊.

Hello Paula. Good job. Regarding your questions, to create the graph you can create for each column, 2 divs positioning them one inside the other. The sizes of the inner divs (bars on the chart), you can determine as per the json values. As for the colors, you can use JavaScript to add a class and style this class in CSS. If you want, see how I managed to solve this challenge. https://github.com/rodrigompires/DesafioExpensesChartComponentMain

I hope it helps you.

Hi Paula,

congratulation on completing the challenge

I just saw your code and like to give some suggestions with your permission,

1. you can add another key to every object in the data.json and then map it for every bar so that you can change the color of the bars.

2. Start using semantic HTML in your code. Here is a blog for you to get started with semantic HTML. https://www.simplilearn.com/tutorials/html-tutorial/html-semantics

If you want to know how to do this with only Js you can check out my solution.

I hope it helps, Thanks happy coding :)