Charts

Gauge Chart

Radial score. Default and Motion variants.

Examples

Default

Cronus radial score with the value in the hub.

tsx

<GaugeChart value={72} label="Health" />

Motion

Notched arc with the score in the hub.

tsx

import { Gauge } from "@cronus-ui/ui/charts";

<Gauge value={72} centerValue={72} totalNotches={40} defaultLabel="Score" />

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add gauge-chart

tsx

import { GaugeChart } from "@cronus-ui/ui";

Usage

Motion exports `Gauge` (not GaugeChart). orientation="linear" is a horizontal notch track.

tsx

import { Gauge } from "@cronus-ui/ui/charts";

<Gauge value={72} centerValue={72} defaultLabel="Score" totalNotches={32} />

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

Gauge

Notched arc or linear track. Optional center statistic.

Prop	Type	Default	Description
`value`*	`number`	—	Fill level 0–100.
`orientation`	`"arc" \| "linear"`	`"arc"`	Arc (default) or horizontal track.
`totalNotches`	`number`	—	Notch count.
`spacing`	`number`	—	Fraction of the track reserved for gaps.
`useGradient`	`boolean`	—	Interpolate active notches along activeGradient.
`centerValue`	`number`	—	Center statistic. Omit to hide the label block.
`defaultLabel`	`string`	—	Label under the value.
`prefix`	`string`	—	Prefix before the number (e.g. $).
`suffix`	`string`	—	Suffix after the number (e.g. %).
`labelPlacement`	`GaugeLabelPlacement`	—	Linear gauges only. Arc always overlays center.

Linear gauge

orientation="linear" draws a horizontal notch track. labelPlacement puts the statistic start/center/end.

tsx

<Gauge orientation="linear" value={64} centerValue={64} defaultLabel="Capacity" labelPlacement="end" />

Data format

// No data array — pass a 0–100 value.
<Gauge value={72} centerValue={72} defaultLabel="Score" />

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`. Active notches use the chart ramp / primary; inactive notches use a muted mix of `--chart-grid`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add motion @visx/responsive

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component GaugeChartDefault layout:inline style:gauge-chart {
  value:72
  label "Score"
}

page "/audit/gauge-chart/default" type:custom {
  use GaugeChartDefault
}

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

GaugeChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`value`*	`number`	—	Controlled value.
`label`	`string`	`"Score"`	—
`max`	`number`	`100`	—
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.