Gauge Chart
A visual indicator for representing a single quantitative value within a known range, rendered as a semicircle arc in continuous or segmented mode.
Installation
npm install --save @godaddy/antaresProps
labelstring—Primary text label displayed inside the gauge (e.g. "50%").
subLabel?string | undefined—Descriptive label below the primary value.
rangeLabel?GaugeChartRangeLabel | undefined—Min/max labels to contextualize the gauge range. Requires both min and max.
segments?number | undefined—Segment count for segmented mode; omit for continuous (0–100). When set, must be a finite positive integer or the component throws.
labelType?"text" | "value" | undefined'value'Controls the font size of the primary label. Use `'value'` when the label displays a numeric or percentage value (larger type); use `'text'` when the label contains a short descriptive string (smaller type).
variant?"default" | "success" | "warning" | "critical" | undefined'default'Status color variant.
valuenumber—Fill value — 0–100 for continuous, 0 to effective segment count when segmented. Clamped at runtime.
display?"grid" | "inline-grid" | undefined'grid'The display property for the grid container.
areas?string[] | undefined—Defines named grid areas. Eg. ['header header', 'sidebar main']
rows?string | undefined—Defines the rows of the grid. Eg. 'auto 1fr auto'
autoColumns?string | undefined—The size of implicitly-created columns.
autoRows?string | undefined—The size of implicitly-created rows.
autoFlow?"row" | "column" | "dense" | "row dense" | "column dense" | (string & {}) | undefined—Controls how auto-placed items are flowed into the grid.
as?(React.ElementType & "div") | undefined'div'Polymorphic element type.
padding?Spacing | Spacing[] | undefined—Padding on all sides. Accepts single value or array.
inlinePadding?Spacing | Spacing[] | undefined—Padding on inline (horizontal) direction.
inlinePaddingStart?Spacing | undefined—Padding on inline start (left in LTR).
inlinePaddingEnd?Spacing | undefined—Padding on inline end (right in LTR).
blockPadding?Spacing | Spacing[] | undefined—Padding on block (vertical) direction.
blockPaddingStart?Spacing | undefined—Padding on block start (top).
blockPaddingEnd?Spacing | undefined—Padding on block end (bottom).
elevation?"base" | "card" | "raised" | "overlay" | undefined—Elevation levels for visual depth.
rounding?Rounding | undefined—Rounding values for border radius.
alignSelf?"center" | (string & {}) | "auto" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | undefined—In Flex/Grid layout. Cross-axis alignment within flex/grid container.
justifySelf?"center" | (string & {}) | "auto" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "stretch" | "left" | "right" | undefined—In Flex/Grid layout. Main-axis alignment within flex/grid container.
order?string | number | undefined—In Flex/Grid layout. Layout order within flex/grid container.
flex?string | number | undefined—In Flex/Grid layout. Flex shorthand for grow, shrink, and basis.
flexGrow?string | number | undefined—In Flex/Grid layout. How much the item will grow relative to siblings.
flexShrink?string | number | undefined—In Flex/Grid layout. How much the item will shrink relative to siblings.
flexBasis?string | undefined—In Flex/Grid layout. Initial main size before growing/shrinking.
gridArea?string | undefined—In Flex/Grid layout. Named grid area for placement.
gridColumnStart?string | undefined—In Flex/Grid layout. Grid column start line.
gridColumnEnd?string | undefined—In Flex/Grid layout. Grid column end line.
gridRowStart?string | undefined—In Flex/Grid layout. Grid row start line.
gridRowEnd?string | undefined—In Flex/Grid layout. Grid row end line.
alignContent?"center" | (string & {}) | "normal" | "start" | "end" | "stretch" | "space-around" | "space-between" | "space-evenly" | "baseline" | undefined—The distribution of space around children along the cross axis in flex or block axis in grid
alignItems?"center" | (string & {}) | "normal" | "start" | "end" | "stretch" | "baseline" | undefined—Sets the align-self property for each child.
gap?Spacing | Spacing[] | undefined—The gap between children.
columnGap?Spacing | undefined—The gap between columns.
rowGap?Spacing | undefined—The gap between rows.
inputMode?"search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined—Hints at the type of data that might be entered by the user while editing the element or its contents
is?string | undefined—Specify that a standard HTML element should behave like a defined custom built-in element
Examples
Basic
A continuous gauge with a single label.
import { GaugeChart } from '@godaddy/antares';export function BasicExample() { return <GaugeChart value={50} label="50%" aria-label="Basic gauge" style={{ maxWidth: '200px', margin: 'auto' }} />;}Continuous Values
Multiple continuous gauges showing different fill percentages.
import { Grid, GaugeChart } from '@godaddy/antares';export function ContinuousExample() { const values = [0, 25, 50, 75, 100]; return ( <Grid columns="repeat(auto-fit, minmax(180px, 1fr))" rowGap="md" justifyContent="center" alignContent="center"> {values.map(function renderGauge(v) { return <GaugeChart key={v} value={v} label={`${v}%`} subLabel="Progress" aria-label={`Gauge at ${v}%`} />; })} </Grid> );}Segmented
Segmented gauges divide the arc into discrete sections (1–5). The value prop selects how many segments are filled.
import { Grid, GaugeChart } from '@godaddy/antares';export function SegmentedExample() { return ( <Grid columns="repeat(2, 200px)" rowGap="lg" justifyContent="center"> <GaugeChart segments={5} value={0} label="0/5" subLabel="Empty" aria-label="Gauge with 0 of 5 filled" /> <GaugeChart segments={5} value={2} label="2/5" subLabel="Partial" aria-label="Gauge with 2 of 5 filled" /> <GaugeChart segments={5} value={5} label="5/5" subLabel="Full" aria-label="Gauge with 5 of 5 filled" /> <GaugeChart segments={3} value={1} label="1/3" subLabel="Three segments" aria-label="Gauge with 1 of 3 filled" /> </Grid> );}With Range Labels
Min/max labels positioned below the gauge arc at the left and right edges. Both min and max must be provided.
import { Grid, GaugeChart } from '@godaddy/antares';export function WithRangeLabelsExample() { return ( <Grid columns="repeat(2, 1fr)" gap="lg" justifyContent="center"> <GaugeChart value={65} label="65%" subLabel="CPU Usage" rangeLabel={{ min: 0, max: 100 }} aria-label="CPU usage gauge" /> <GaugeChart value={3} segments={5} label="3/5" subLabel="Risk Level" rangeLabel={{ min: 'Low', max: 'High' }} variant="warning" aria-label="Risk level gauge" /> </Grid> );}Variants
Color variants convey meaning at a glance — use success, warning, or critical alongside descriptive text.
import { Grid, GaugeChart } from '@godaddy/antares';export function VariantsExample() { return ( <Grid columns="repeat(2, 1fr)" gap="lg" justifyContent="center"> <GaugeChart value={50} label="50%" subLabel="Default" variant="default" aria-label="Default variant gauge" /> <GaugeChart value={50} label="50%" subLabel="Success" variant="success" aria-label="Success variant gauge" /> <GaugeChart value={50} label="50%" subLabel="Warning" variant="warning" aria-label="Warning variant gauge" /> <GaugeChart value={50} label="50%" subLabel="Critical" variant="critical" aria-label="Critical variant gauge" /> </Grid> );}Label Type
Control the font size of the primary label using labelType. Use 'value' for numeric or percentage values and 'text' for short descriptive strings.
import { Grid, GaugeChart } from '@godaddy/antares';export function LabelTypeExample() { return ( <Grid columns="repeat(2, 1fr)" gap="lg" justifyContent="center"> <GaugeChart value={72} label="72%" subLabel="Completion" aria-label="Gauge with numeric value label" /> <GaugeChart value={72} label="Good" labelType="text" subLabel="Completion" aria-label="Gauge with text label" /> </Grid> );}Troubleshooting
Gauge Not Sizing Correctly
The component uses container-type: inline-size and fills its parent width. Ensure the parent has a defined width:
// ❌ No width constraint — gauge may stretch to full viewport
<GaugeChart label="50%" value={50} aria-label="Progress" />
// ✅ Parent provides width context
<div style={{ width: 200 }}>
<GaugeChart label="50%" value={50} aria-label="Progress" />
</div>
// ✅ Or use className for max-width
<GaugeChart className="my-gauge" label="50%" value={50} aria-label="Progress" />Value Out of Range
Values outside the valid range are clamped silently at runtime. For continuous mode the range is 0–100; for segmented mode the range is 0 to the segment count.
// ✅ Continuous: 0–100
<GaugeChart label="75%" value={75} aria-label="Score" />
// ✅ Segmented: 0 to segments
<GaugeChart label="3/5" value={3} segments={5} aria-label="Risk level" />DonutChart
Donut charts are for parts-to-whole comparison—how partial elements add up to a total—shown as a ring so a few categories are easy to compare at a glance.
LineChart
Line Chart shows how something changes over time or along a continuous scale. It connects data points with lines so people can quickly spot trends, peaks, dips, and patterns.