Progress Bar III
Problem statement
Progress Bar III is the most advanced version: a multi-segment stacked bar (like GitHub's language breakdown or a budget allocation chart). Multiple values share one bar, each segment is a different color, and the total must always equal 100%. Hovering a segment reveals a tooltip with the label and exact percentage.
Build a StackedBar component that takes an array of { label, value, color } items. Segments are rendered proportionally, and the component normalises the values to sum to 100% internally. Include a legend below the bar.
The engineering challenge is normalisation: if values don't sum to 100, scale them proportionally. Handle edge cases like all-zero values and floating-point rounding that could leave a 1px gap at the end of the bar.
Requirements & constraints
- Multi-segment bar where each segment's width = value/total * 100%
- Normalise values so they always sum to 100%
- Hover tooltip showing label and percentage
- Legend below bar with color dot and label
- Handle all-zero edge case gracefully
- Round final segment to fill any floating-point remainder
How to approach Progress Bar III
The strategy an interviewer expects you to reach for.
Why This Question Exists Stacked/Multi-segment Bar tests normalisation, floating-point arithmetic, and zero-value edge case handling. It's used in data visualisation interviews (Grafana, Linear, Notion) and design-system interviews where components must be robust against arbitrary input data.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.