NEWGauge
Horizontal Bullet Chart
Linear gauge bullet chart comparing actual metrics against target benchmarks and qualitative performance bands.
Loading chart…
#gauge#bullet#linear#kpi#performance#targets
Customization Guides & Code Snippets
◆Customizing Target Marker Lines
Position the red target marker using percentage coordinates along the qualitative range track.
<div style={{ position: 'absolute', left: `${targetPct}%`, width: 3, height: 22, background: '#ff6b6b' }} />◆Dynamic Goal Color States
Switch the performance bar color dynamically between Emerald (#00e5a0) when meeting or exceeding target, and Blue (#4a9eff) when below target.
background: item.actual >= item.target ? '#00e5a0' : '#4a9eff'When to use a Horizontal Bullet Chart
A Horizontal Bullet Chart 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 Horizontal Bullet Chart
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