Gauge Chart

Mobile

Tablet

Desktop

ARR run rate: $428,000

Installation

pnpm add @blakeui/pro-react

npm install @blakeui/pro-react

yarn add @blakeui/pro-react

bun add @blakeui/pro-react

GaugeChart is built on visx arc math and the motion library. It is a single component: pass value (measured against maxValue, default 100) and the gauge lights round(value / maxValue × notchCount) of its 40 tapered notches across a 270° sweep that opens at the bottom. The track notches map to the neutral --separator token; the lit notches ride --chart-1 (the single-series data color). The bowl shows a rolled stat — centerValue (defaulting to value) through the shared Odometer, over a muted centerLabel. There is no hover layer by design: a single-value gauge has nothing further to inspect.

import {GaugeChart} from "@blakeui/pro-react";

function App() {
  return (
    <GaugeChart
      centerLabel="ARR run rate"
      centerValue={428000}
      value={66}
      valuePrefix="$"
    />
  );
}

Motion

On mount the 40-notch track springs in as a center-origin wave (each notch staggered 15ms), and the lit value layer follows after a 300ms hand-off (20ms per notch). The center stat always rolls through the Odometer. All motion collapses to an instant render under prefers-reduced-motion, and the gauge exposes its value to assistive tech through a polite live region.

Loading state

Set status="loading" to show a stroke-only skeleton arc while data resolves; flip it to "ready" and the load→ready choreography plays — the pulse flows out along the arc, the caption exits, and the notch wave springs in.

Mobile

Tablet

Desktop

Loading revenue…

API Reference

GaugeChart

The single chart component. Measures its container (a 21:16 box when responsive), computes the notch geometry, and renders the track wave, value layer, center stat, and loading chrome.

Prop	Type	Default	Description
`value`	`number`	—	Current value. The lit notch count is `round(value / maxValue × notchCount)`.
`maxValue`	`number`	`100`	Value at which every notch is lit.
`notchCount`	`number`	`40`	Number of notches around the sweep.
`spacing`	`number`	`25`	Percentage of the sweep reserved for the gaps between notches.
`notchRadius`	`number`	`0`	Corner radius of each notch in px (0 = sharp trapezoids).
`startAngle`	`number`	`135`	Sweep start angle in degrees (0° = east, clockwise).
`endAngle`	`number`	`405`	Sweep end angle in degrees. The defaults draw a 270° sweep opening at the bottom.
`trackOpacity`	`number`	`0.4`	Unlit-track notch opacity.
`size`	`number`	—	Fixed box width in px (height follows the 21:16 ratio). Omit for responsive sizing.
`showCenter`	`boolean`	`true`	Render the rolled value + label in the bowl.
`centerValue`	`number`	`value`	Value shown by the center Odometer (e.g. a dollar figure behind a percentage gauge).
`centerLabel`	`string`	`"Total"`	Center label under the value.
`valuePrefix`	`string`	—	Static text rendered before the center value (e.g. `"$"`).
`status`	`"loading" \| "ready"`	`"ready"`	While loading, shows the skeleton arc. Flipping to ready plays the entrance.
`loadingLabel`	`string`	`""`	Centered caption shown while loading. Empty string hides it.

Also supports all native div HTML attributes.