Premium Docs
Design System Showroom Density normal Platform Flagship
Landing
Playground
Navigator Library map
8 sections 212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting. Runtime fingerprint Token readout from the active provider chain.
Live DS Runtime
Rottay / Modern Platform Flagship
Primary
#FFFFFF Secondary #A0A0A5
Compact runtime evidence across 3+ token signals.
Statistical 3 variants Runtime-driven docs
Live preview
Validate the chart in the active showroom runtime Sidebar engine and tenant drive this Statistical
This preview should stand on the chart itself: legibility, token use, spacing, and interaction rhythm all need to hold without extra local storytelling chrome. Loading chart preview... The interactive chart canvas mounts client-side so the docs page stays stable while the preview runtime boots.
Import Published package entrypoint, ready to copy.
Consumption
Runtime-aware snippet
Copy import { GaugeChart } from '@rottay/design-system';
Usage Paste-ready example that shows the base contract first.
Consumption
Runtime-aware snippet
Copy <GaugeChart
value={73}
label="Score"
segments={[
{ from: 0, to: 33, color: 'var(--ds-color-error)', label: 'Poor' },
{ from: 33, to: 66, color: 'var(--ds-color-warning)', label: 'Fair' },
{ from: 66, to: 100, color: 'var(--ds-color-success)', label: 'Good' },
]}
height={250}
animate
/>GaugeChart props Prop contracts stay readable across dark-first and light-first tenants.
27 props 1 required 26 optional
Fast read Start with required props, then scan defaults before dropping to per-row details.
Contract posture This reference stays intentionally concise so the primitive contract remains scannable.
Related charts
Continue within Statistical Browse all Primitives 93 documented routes
Structures 24 documented routes
Surfaces 36 documented routes
Verticals 3 documented routes
Playground 1 documented routes
Developers 2 documented routes
rounded top bar · solid dividers
Patterns Visualization Charts Gauge
Gauge Active profile Platform Flagship
Runtime posture Rottay / modern
D3-backed chart recipes with token-aware styling. Tier Chart A specialized visualization pattern.
Family Statistical Start with baseline meaning.
Best for explaining distributions Compare against BulletChart for tighter dashboards.
showing multivariate shape
Review checklist 3 items
baseline meaning
range legibility
target context
Compare against 2 items
BulletChart for tighter dashboards
BarChart for clearer exact comparison
number
none
number
0
number
100
GaugeSegment[]
none
Threshold bands and their colors.
boolean
true
Displays the current value.
(value: number) => string
none
Formats the displayed value.
string
none
Metric label displayed below the value.
number
-120
Arc start angle in degrees.
number
120
Arc end angle in degrees.
number
0.7
boolean
true
Displays the needle indicator.
string
none
boolean
none
Displays the family legend.
ChartCompactCoreConfig
none
Configures compact rendering but does not activate it.
boolean
false
Activates compact rendering explicitly.
boolean
false
Activates compact rendering below compactBreakpoint.
number
640
Container-width threshold for autoCompact.
number | string
none
Chart container width; falls back to the family default.
number
none
Chart height; falls back to the family default.
string
none
Additional class name applied to the chart wrapper.
CSSProperties
none
Inline styles applied to the chart wrapper.
boolean
false
Displays the governed loading state.
string
none
Accessible chart title displayed above the plot.
string
none
Supporting text displayed below the title.
boolean
none
Overrides the active tenant animation personality.
boolean
true
Measures and follows the container width.
boolean
none
Enables the family tooltip behavior.
value Required
numbernone
Current metric value. min Optional
number0
Lower domain bound. max Optional
number100
Upper domain bound. segments Optional
GaugeSegment[]none
Threshold bands and their colors. showValue Optional
booleantrue
Displays the current value. formatValue Optional
(value: number) => stringnone
Formats the displayed value. label Optional
stringnone
Metric label displayed below the value. startAngle Optional
number-120
Arc start angle in degrees. endAngle Optional
number120
Arc end angle in degrees. innerRadius Optional
number0.7
Inner-radius ratio. showNeedle Optional
booleantrue
Displays the needle indicator. needleColor Optional
stringnone
Needle color. legend Optional
booleannone
Displays the family legend. compact Optional
ChartCompactCoreConfignone
Configures compact rendering but does not activate it. compactMode Optional
booleanfalse
Activates compact rendering explicitly. autoCompact Optional
booleanfalse
Activates compact rendering below compactBreakpoint. compactBreakpoint Optional
number640
Container-width threshold for autoCompact. width Optional
number | stringnone
Chart container width; falls back to the family default. height Optional
numbernone
Chart height; falls back to the family default. className Optional
stringnone
Additional class name applied to the chart wrapper. style Optional
CSSPropertiesnone
Inline styles applied to the chart wrapper. loading Optional
booleanfalse
Displays the governed loading state. title Optional
stringnone
Accessible chart title displayed above the plot. subtitle Optional
stringnone
Supporting text displayed below the title. animate Optional
booleannone
Overrides the active tenant animation personality. responsive Optional
booleantrue
Measures and follows the container width. tooltip Optional
booleannone
Enables the family tooltip behavior.