GaugeChart

Visualises progress toward a bounded target using a semicircular gauge with configurable ranges, ticks, labels, and animated needle. Ported from the UI Gauge component to the charts package so it can slot into chart demos, interaction providers, and theming helpers.

The chart also supports markers for spotlighting thresholds (for example SLO limits or compliance baselines). Markers can render as secondary ticks or complementary needles, emit focus callbacks, and feed into the legend so demos can narrate multiple guardrails on the same gauge.

Additional niceties include gradient range fills, innerRadiusRatio for donut style layouts, and interaction hooks (onValueChange, onMarkerFocus) so dashboards can synchronise copy or annotations as the gauge updates.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽¹⁾

Properties

⁽⁵⁶⁾

Playground

Loading demo…

import
 
{
 
GaugeChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
RANGES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<GaugeChart
      
title
=
"System Health"
      
subtitle
=
"Live CPU utilisation"
      
maxWidth
=
{
320
}
      
height
=
{
240
}
      
value
=
{
68
}
      
min
=
{
0
}
      
max
=
{
100
}
      
thickness
=
{
16
}
      
track
=
{
{
 opacity
:
 
0.2
 
}
}
      
ranges
=
{
RANGES
}
      
ticks
=
{
{
 major
:
 
5
,
 minor
:
 
4
,
 color
:
 
'#94A3B8'
 
}
}
      
labels
=
{
{
 formatter
:
 
(
v
)
 
=>
 
`${Math.round(v)}%`
,
 offset
:
 
26
 
}
}
      
needle
=
{
{
 length
:
 
0.85
,
 centerSize
:
 
6
,
 showCenter
:
 
true
 
}
}
      
centerLabel
=
{
{
 show
:
 
true
,
 formatter
:
 
(
val
)
 
=>
 
`${Math.round(val)}%`
,
 secondaryText
:
 
(
_
,
 pct
)
 
=>
 
`${Math.round(pct * 100)}% of max`
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
 
}
}
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/GaugeChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap