Gauge

An aesthetic and customizable circular visual component for React.

PlaygroundAPIGitHub

Installation

npm install @suyalcinkaya/gauge
yarn add @suyalcinkaya/gauge
pnpm install @suyalcinkaya/gauge
bun add @suyalcinkaya/gauge

Default

Show code

Label

Display the value inside the Gauge with the showValue prop.

801008010080100
Show code

Variant

The ascending variant (default) is useful for cases like tracking the percentage of a goal *achieved*. The descending variant is useful for cases like tracking the percentage of a goal *remaining*.

4242
Show code

Animation

On initial render, the showAnimation prop animates the Gauge from 0 to the value for the ascending variant, and from 100 to the value for the descending variant.

18188181
Show code

Default color scale

Show code

Custom color scale

Show code

Custom secondary color

Show code

Arc priority

When displaying half ratio (51 > value > 49), the Gauge will make both arcs are equally sized.

48
49
50
51
52
Show code

In the following example, the Gauge will loop through the values 42, 50, and 58 every 1.5 seconds to make it easier to visualize.

50

Playground

Play with the configuration of the Gauge.

72

Gauge config

Customize your Gauge.