
Please log in to post a comment
Log in with GitHubCommunity feedback
- @khatri2002
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:
- The height is independent of the data values (i.e., if data changes, the height won’t adjust automatically).
- 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 barmaxValue
→ 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! 🚀
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord