Status
The status of the component
Status
The status of the component
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
On hover of a single bar, all other bars reduce in opacity. A tooltip follows the hovering mouse.
If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.
On focus, a focus ring encompasses the bar with a corresponding tooltip.
If the data returns a null value, it should be treated as a zero and no bar will be shown.
To show how data is trending against a benchmark, a target line can be added which appears above / to the front of all bars.
The max distance between bars shouldn’t exceed the width of the bars themselves.
Once the distance between bars is about to exceed the width of the bars, the width of the bars should increase up to a max width of 64px.
Bar charts with multiple datasets follow many of the same behaviors (ie. Drilldown, focus, null value, responsiveness) as those with a single dataset but they have a slightly different hover behavior whereby hovering on a single bar reduces the opacity of all other bars (across all datasets) and hovering on a series label reduces the opacity of all bars not in that series.