Expenses Chart Component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Matt, good job getting it working :) I had a look at your code since I also worked on this project this week and started getting curious about Chart.js when I was checking out other solutions since many had used it. I don't have experience with Chart.js, but just based on what I saw in your code, I have some suggestions you can consider trying in relation to the questions you posed:

  • About the height of the bars: You might need to use a multiplier number to get the height of the bars to match the design, because if you use the numbers right from the data, that might not match the actual heights in the design. Maybe you had used one already, but I couldn't find this in your code since I don't know how Chart.js works. Anyway, what I did was, I lined up the design with my screen, and then just adjusted the number I had until I got the heights somewhat level. I used em units, and the number I got in the end was 0.1595, so this got multiplied to all the numbers to obtain the final height in em. You can try this when pushing the data into your figures array. Once the bars are shorter, maybe you can try to adjust the heights and paddings in your container and other divs.

  • Are you able to add classes to the elements at all in Chart.js? If so, maybe you can try doing that instead for styling, as in, try having your CSS override the styles in Chart.js.

  • The total amount in the design is actually for the month, and the numbers in the data are only for the week, so you will need to use the original number given in the design instead of calculating the sum, otherwise you'll find that the sum total calculated won't match the design's $478.33. Side note here: instead of using for loops, you can try map/reduce, as that would simplify your code a lot, and you'll find they're quite handy for many uses.

  • Instead of writing out an entire array with the same 7 strings, you can try this: new Array(7).fill("hsl(10, 79%, 65%)")

  • By the way, I can see that you still got some console.log() lines in your JS code; you might want to remove those in your final code!

  Here's my JS file, which shows quite a different way in tackling the same problem. It's vastly different from Chart.js and a lot simpler; all I did was just create divs and add classes for styling. The problem sometimes with using libraries is that they're a bit of a black box, and you may not know what's going on under the hood and may not be able to make as many customizations.

  Wish I could have helped a bit more, but hopefully this could provide some ideas in any case!

  Marked as helpful

  1

  ---

  

  mattyoung7•200

  @mattyoung7Posted over 2 years ago

  @elaineleung Thank you so much for the feedback! I'll play around with my code when I get a chance and try to make it reflect your suggestions above. Some really handy tips in your message, much appreciated :)

  0