BarIndicator
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A horizontal bar chart that displays a ratio as a filled percentage. Useful for showing progress, utilization, or any value relative to a maximum. The bar fills its box, rounded and outlined, and keeps its rounding and outline at the same size however wide or tall the box is.
Import
import { BarIndicator } from "~lib/charts/bar-indicator";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
numerator | number | Yes | N/A | The current value |
denominator | number | Yes | N/A | The maximum value |
width | number | string | No | "100%" | The width of the bar |
height | number | string | No | "0.75rem" | The height of the bar |
Examples
Simple
A basic bar showing 50 out of 100 (50% filled):
Exceed Maximum
When numerator exceeds denominator, the bar is clamped to 100%:
Negative
Negative values are clamped to 0%:
See Also
- DonutGauge - Circular gauge for displaying ratios
- LineChart - Line chart for time series data