Bklit Logo

Gauge

Notch arc with PieCenter-style NumberFlow, theme fills, optional patterns in defs, and separate active / inactive arc gradients when enabled.

Trending up by 5.2% this month

Gauge — tight arc, filleted corners
No spacing between notches, 7px corner radius, custom sweep from 140° to 400°.

Trending up by 5.2% this month

Gauge — dual arc gradients
Foreground and background notches each get their own hex ramp along the arc (requires useGradient).

Trending up by 5.2% this month

Gauge — pattern foreground, dim solid track
Diagonal PatternLines on active notches; inactive track uses `chart-1` at 0.4 fill opacity.

Trending up by 5.2% this month

Gauge — sparse ring, quarter sweep
Fewer notches, wide spacing, sharp corners, 90° → 270° sweep — reads like a progress ring segment.

Trending up by 5.2% this month

Gauge — same density, bottom half sweep
Same notch layout as the sparse ring example, but the arc runs 180° → 360° (lower semicircle emphasis).

Trending up by 5.2% this month

Gauge — flipped sweep (270° → 450°)
Same spacing and notch count as the quarter sweep, rotated so the gap sits on the opposite side of the ring.

Trending up by 5.2% this month

Gauge — soft fillets, full depth
Default notch length with an 8px corner radius — smooth joints without going fully pill-shaped.

Trending up by 5.2% this month

Gauge — short notches, bold corners
Radial depth at 38% with a 12px fillet — stubbier ticks that still read soft at the tips.

Trending up by 5.2% this month

Gauge — near-circular notches
Full default depth with a 22px corner radius (geometry-clamped) for a capsule / almost-round look.

Trending up by 5.2% this month

Gauge — linear notch track
Horizontal notch bar via orientation="linear" — same fill model as the arc gauge, responsive parent width.

Trending up by 5.2% this month

Gauge — linear with label below
Optional centerValue and labelPlacement for linear gauges — same placement model as chart legend.

Trending up by 5.2% this month

Gauge — linear dual gradients
Active and inactive notches each interpolate along their own hex ramp when useGradient is enabled.

Trending up by 5.2% this month