solution

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 4 months ago

  Hi @JuSeRDev!

  The developed solution looks great! Below is an important suggestion for improvement:

  ---

  Make Bar Heights Dynamic Instead of Fixed CSS

  Right now, each bar has a fixed height in CSS, like:

  .bar-mon {
      height: 50px;
  }
  

  This approach is not scalable because:

  1. The height is independent of the data values (i.e., if data changes, the height won’t adjust automatically).
  2. Manually updating heights in CSS is inefficient and impractical.

  Calculate Heights Dynamically Using JavaScript

  Formula to Calculate Heights in Percentage:

  height = (value / maxValue) * 100;  // This gives height in %
  

  • value → The data value for the current bar
  • maxValue → The highest value among all bars
  • The bar with the highest value will now have a height of 100%, and others will be scaled proportionally.

  Now, whenever the data changes, the heights of the bars will update dynamically without any manual CSS adjustments.

  ---

  Keep up the amazing work! 🚀

  00