Fluxo UIFluxo UIv0.4.1

Activity Gauge

A multi-series concentric ring chart with shared center content and an optional interactive legend.

Basic Usage

Default Activity Gauge

A multi-series ring chart with a centered metric and a legend below.

import { ActivityGauge } from 'fluxo-ui';

<ActivityGauge
  size="lg"
  centerTitle="ACTIVITY"
  centerValue="73%"
  centerSubLabel="of weekly goal"
  series={[
    { name: 'Move', value: 320, max: 500, color: '#ef4444' },
    { name: 'Exercise', value: 28, max: 30, color: '#22c55e' },
    { name: 'Stand', value: 9, max: 12, color: '#3b82f6' },
  ]}
/>

Sizes

Sizes

sm, md, lg, and xl preset sizes — or supply a custom number.

<ActivityGauge size="sm" series={series} centerValue="65%" />
<ActivityGauge size="md" series={series} centerValue="65%" />
<ActivityGauge size="lg" series={series} centerValue="65%" />
<ActivityGauge size="xl" series={series} centerValue="65%" />

Legend Placement

Legend Placement

Render the legend below, beside the gauge, or hide it entirely.

<ActivityGauge series={series} legend="bottom" centerValue="55%" />
<ActivityGauge series={series} legend="right" centerValue="55%" />
<ActivityGauge series={series} legend="none" centerValue="55%" />

Interactive

Interactive Highlights

Hover or focus a ring or legend item to highlight that series. Click any item to handle a select event.

Selected: —
<ActivityGauge interactive series={series} onSeriesClick={(idx) => setSelected(idx)} />

Import

import { ActivityGauge } from 'fluxo-ui';
import type { ActivityGaugeProps, ActivityGaugeSeries } from 'fluxo-ui';

Props

seriesreq
Array<{ name: string; value: number; max?: number; color?: string }>

Series rendered outermost to innermost as concentric rings

size
'sm' | 'md' | 'lg' | 'xl' | number"'md'"

Overall diameter (preset or pixel value)

ringThickness
number

Width of each ring in px (auto-scaled with size when omitted)

ringGap
number"6"

Gap between rings in px

roundedCaps
boolean"true"

Round vs flat stroke caps

arcStart
number"0"

Start angle in degrees (applied to all rings)

arcEnd
number"360"

End angle in degrees (applied to all rings)

trackColor
string"var(--eui-border-subtle)"

Color of the unfilled portion of every ring

defaultColors
string[]

Palette used when a series omits color

centerContent
ReactNode

Custom slot for arbitrary center content

centerTitle
string

Convenience title text shown in the center

centerValue
string | number

Convenience big value shown in the center

centerSubLabel
string

Convenience sub-label shown in the center

legend
'bottom' | 'right' | 'none'"'bottom'"

Legend placement

legendPosition
'start' | 'center' | 'end'"'center'"

Legend alignment along its axis

interactive
boolean"false"

Hover/focus highlights a series and dims the others

onSeriesClick
(index: number) => void

Fired when a ring or legend item is activated

animate
boolean"true"

Sweep animation on mount; honors prefers-reduced-motion

tooltip
boolean"true"

Show tooltip with series details on hover/focus

valueFormatter
(s: { name: string; value: number; max: number }) => string

Custom formatter for tooltip and ARIA description

id
string

HTML id attribute

className
string

Additional CSS classes

ariaLabel
string

Accessible label override (defaults to series summary)

Features

Multi-Series Rings

Stack 1–N concentric rings with independent values, max, and colors.

Center Slot

Built-in title/value/sub-label or fully custom centerContent.

Interactive Highlights

Hover/focus rings or legend items to dim other series and emphasize one.

Tooltips & ARIA

Native tooltips on hover plus per-ring titles for screen readers.