Gauge

Installation

pnpm dlx shadcn@latest add @bklit/gauge-chart

Usage

Gauge draws notches around an arc and uses PieCenterShell so the center matches donut PieChart / PieCenter (NumberFlow + label) without mounting slices.

• Fill vs center: value is the arc fill 0–100. centerValue is the statistic passed to the center (often the same story or a related KPI).
• Responsive: omit width and height to fill the parent; the root uses minWidth (default 300) and an aspect ratio so layout stays stable. Pass explicit width / height for fixed layouts.
• Patterns / gradients in <defs>: pass PatternLines, LinearGradient, etc. as children (same idea as PieChart), then set activeFill / inactiveFill to url(#id).
• Arc gradients: set useGradient. Optional activeGradient and inactiveGradient are [hexFrom, hexTo] tuples (interpolated along the notch index).
• Fill opacity: activeFillOpacity and inactiveFillOpacity map to SVG fill-opacity (0–1). Defaults are 1 for active notches and 0.8 for the track; docs and gallery examples use inactiveFillOpacity={0.4} for a lighter track.
• Corner radius: notchCornerRadius is the fillet in pixels at each notch corner (0 = sharp). Large values are clamped by edge length and radial depth so shapes can approach a capsule / near-circular look.

import { Gauge, PatternLines } from "@bklitui/ui/charts";

export default function RevenueGauge() {
  return (
    <Gauge
      value={66}
      centerValue={428_000}
      spacing={25}
      inactiveFillOpacity={0.4}
      defaultLabel="ARR run rate"
      formatOptions={{
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0,
      }}
    />
  );
}

Props

Gauge

Live examples

See the Gauge gallery. Use Studio to tune every gauge prop interactively and copy the resulting code.