Liquid Fill Bar Chart React component
Usage limits as bars of liquid: gentle waves on every surface, levels that spring to new values with a slosh, and a warning line near the top.
About the Liquid Fill Bar Chart component
Liquid Fill Bar Chart makes limits easy to feel. Each bar holds a liquid with gentle waves on its surface, so how full something is reads instantly, and a dashed line shows where it gets tight.
Switching view sends the levels to their new height on a spring, with a real slosh as they settle. Moving the pointer quickly across a bar stirs it too.
When to use it
Use it for quotas and capacity: plan usage, storage, seats, budgets or stock levels, where each value has a clear maximum.
For values with no natural limit, use a regular bar chart.
Installation
Add the Liquid Fill Bar Chart component to your project with the shadcn CLI. It lands in components/liquid-fill-bar-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/liquid-fill-bar-chartProps
<LiquidFillBarChart /> accepts 8 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Plan usage" |
| subtitle | string | "How full each limit is. Stir them with the pointer." |
| views Sets of levels to switch between. They should list the same bars in the same order. | { label: string; bars: LiquidBar[] }[] | DEFAULT_VIEWS |
| defaultView Index of the view shown first. | number | 0 |
| warnAt A line across every bar, as a share of full, e.g. 0.85. Pass null to hide it. | number | null | 0.85 |
| color Colour of the liquid. | string | — |
| height Height of the bars, in px. | number | 230 |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Plan usage"
- subtitlestringDefault: "How full each limit is. Stir them with the pointer."
- views
Sets of levels to switch between. They should list the same bars in the same order.
{ label: string; bars: LiquidBar[] }[]Default: DEFAULT_VIEWS - defaultView
Index of the view shown first.
numberDefault: 0 - warnAt
A line across every bar, as a share of full, e.g. 0.85. Pass null to hide it.
number | nullDefault: 0.85 - color
Colour of the liquid.
string - height
Height of the bars, in px.
numberDefault: 230
Liquid Fill Bar Chart FAQ
- Do all bars need the same maximum?
- No. Each bar has its own max and unit, and the height shows the share used.
- Can I remove the warning line?
- Yes. Pass warnAt={null}.
- Is it heavy?
- No. One loop redraws a few short paths, writes them straight to the elements and stops when the chart leaves the screen.
- What happens with reduced motion?
- The surfaces are flat and still, and the levels change at once.
