Expenses chart component

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted 3 months ago

  Hi! The developed solution looks good! The animation included in the bars is truly impressive! Great work! 🚀

  Few Suggestions:

  1.

  Currently, the height of the bar is being defined using a fixed multiplier:

  bar.style.height =  `${data[index].amount * 2.5}px`;
  

  This approach works fine, but there's a more dynamic and scalable way to handle it, using relative heights in percentages. Instead of using a fixed multiplier, consider the following approach:

  bar.style.height =  `${(data[index].amount / maxAmount) * 100}%`;
  

  Here, maxAmount represents the maximum amount among all given amounts for the week. By calculating the height as a percentage of the maximum value, the bars are sized relative to the largest amount.

  Why use percentages over fixed pixel heights?

  1. Dynamic Responsiveness: Percentages make the bar chart adaptive to its container's size, ensuring consistency across various screen resolutions and container dimensions.
  2. Scalability: With percentages, there's no need to recalibrate a fixed multiplier if the maximum values change. The chart adjusts automatically to fit the container.
  3. Design Flexibility: When heights are in percentages, you can easily manage the overall chart size by providing a fixed height to its container, making it more controllable.

  This relative approach makes the design more robust and visually consistent.

  2.

  When hovering over a bar, a slight layout shift occurs due to the tooltip appearing. This happens because you're toggling its display property between none and block. The shift affects the entire layout as the tooltip takes up space when displayed.

  I would recommend you to make its position as absolute, followed by making each bar's position to relative. This way, tooltip now appears above the bar without altering the surrounding layout.

  Great work so far! Keep it up and happy coding! 🚀

  Marked as helpful

  1

  ---

  

  BRAHIM AJGAGAL•820

  @AslamtoIbrahimPosted 3 months ago

  Hi @khatri2002

  I really appreciate your feedback! It means a lot to me.

  Thanks again!

  Best, @AslamtoIbrahim

  1