Meter

Visualize values in a meter, like checking your car’s fuel gauge, great for displaying measurements at a glance.

Basic

A meter displays a value within a specified range, showing how much of the total range is currently occupied. Unlike a progress bar, which typically indicates progress towards completing a task over time, a meter reflects a specific measurement or quantity at a given moment.

Installation

Decimal Format

By default, the meter will display the value as a percentage. You can change the format of the value by passing a formatOptions prop. This example is shown decimal format.

Currency Format

You can also change the currency format of the value by passing a formatOptions prop. This example is shown currency format.