Dyanamic and responsive expense chart component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Muazzam, well done here, and everything looks like it's working well, especially the tags and hovering, which I've seen a few others struggle with.

  About the transition in hovering from one bar to another, the bars change size due to the width of the price tag, and so that's why the transition doesn't seem as smooth. What I would suggest doing is just to put a position: absolute on the tags so that when they appear, they won't affect the rest of the bars.

  Here's what it'll look like:

  // hover price's parent container
  .days {
      position: relative;  // this is needed in order for position absolute to be placed correctly
  }
  
  .hover-price {
      position: absolute;
      top: -2.5rem; // just a suggested value, feel free to adjust!
  }
  

  I had a quick glance at your code too and things look fairly orderly and clean to me. I think maybe the one major suggestion I'll give is to use let or const variables instead of var. Also, since you're now able to use for loops quite well, try using methods such as forEach() for iteration, as you'll find that it makes your code more readable, cleaner, and smaller. Hope this helps!

  Marked as helpful

  1

  ---

  

  Muazzam•180

  @MuazzyPosted over 2 years ago

  @elaineleung Thank you so much for the brief feedback, will implement these changes. I'm new to js, so i have'nt explored let and const keywords that much but i will surely use it in the future projects!

  1