Home›Gauge›Radial Gauge Chart (Speedometer)
POPULARGauge

Radial Gauge Chart (Speedometer)

Responsive half-circle speedometer gauge for KPI monitoring. Dynamic needle, colored health zones, and score toggles.

Loading chart…
#gauge#kpi#radial#meter#speedometer
Customization Guides & Code Snippets

◆Centering Responsive Speedometer Gauges

Use cx='50%' and cy='80%' on <Pie> so the half-circle gauge centers dynamically regardless of card width on mobile and desktop viewports.

<Pie dataKey="value" startAngle={180} endAngle={0} data={data} cx="50%" cy="80%" innerRadius={90} outerRadius={135} stroke="none" />
When to use a Radial Gauge Chart (Speedometer)

A Radial Gauge Chart (Speedometer) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Displaying a single KPI value against a target (e.g. 78% of goal)
  • ✓Performance scores and health metrics
  • ✓Real-time monitoring dashboards
  • ✓Showing progress toward a goal in a compact format
Tips for Recharts Radial Gauge Chart (Speedometer)
TIP 1Use color zones (green/yellow/red) to show thresholds at a glance
TIP 2Always display the numeric value below or inside the gauge
TIP 3Keep the gauge half-circle — full circles are harder to read
TIP 4Animate the needle on load for better visual impact
TIP 5Pair with a trend indicator (↑ or ↓) to show change vs previous period
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

How do you set up performance thresholds in a radial gauge chart?

Segment the data array into qualitative bands (e.g. Critical 25%, Fair 25%, Good 25%, Optimal 25%) and apply distinct colors (#ff6b6b, #ffd166, #4a9eff, #00e5a0) via <Cell> components.

How do you center and animate a needle in Recharts?

Set cx='50%' and cy='80%' on both the track Pie and the needle Pie component. Pass the active metric score into a trigonometric function that rotates the SVG needle path between 180 degrees (0%) and 0 degrees (100%).

Related Charts