# syncfusion-react-circular-gauge

Build React circular gauges for KPIs, sensor readings, speedometers, and live monitoring dashboards with this skill.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 651 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-circular-gauge/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-circular-gauge

## What it does

This skill guides implementation of `Syncfusion React Circular Gauge`, a React component for showing measurements on a circular scale. It covers axes, Needle, RangeBar, and Marker pointers, colored ranges, annotations, legends, animation, interaction, and live value updates. Export options include PDF, PNG, and SVG.

The included guidance is split across setup, gauge structure, styling, dimensions, API, accessibility, and localization topics. Your project needs the `@syncfusion/ej2-react-circulargauge` package first; without it, the React gauge component cannot be built.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-circular-gauge -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-circular-gauge/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-circular-gauge/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-circular-gauge -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-circular-gauge/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-circular-gauge -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-circular-gauge/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-circular-gauge
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-circular-gauge/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-circular-gauge -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-circular-gauge
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-circular-gauge/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-circular-gauge -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-circular-gauge/SKILL.md

## When to use it
- show KPI values on a circular scale
- build a speedometer or temperature gauge
- compare several values on one axis
- refresh a pointer from sensor data
- export a gauge to PDF, PNG, or SVG

## Example prompts
- Build a React speedometer with colored ranges and a Needle pointer.
- Add several pointers to a dashboard so the agent can compare KPI values and update them from live data.
- Configure `CircularGaugeComponent` for PDF export, printing, and screen-reader labels.

## Similar
- [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill · 13 installs
- [globe-gl](https://affpapa.org/en/nevibecode/skills/globe-gl.md) — skill · 1500 installs
- [recharts](https://affpapa.org/en/nevibecode/skills/recharts.md) — skill · 1100 installs
- [Semiotic](https://affpapa.org/en/nevibecode/mcp/semiotic.md) — MCP server · ★ 2716
- [coordinated-data-views](https://affpapa.org/en/nevibecode/skills/coordinated-data-views.md) — skill · 668 installs
- [metabase-react-sdk-setup](https://affpapa.org/en/nevibecode/skills/metabase-react-sdk-setup.md) — skill · 362 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md