# syncfusion-react-charts

This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. Use it for dashboards and analytics views.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 749 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-charts/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-charts

## What it does

The skill guides React implementations of the Syncfusion Chart component. It covers line, bar, column, area, scatter, pie, doughnut, polar, and radar charts, along with category, numeric, date-time, and logarithmic axes. It also describes multiple series, local data, `DataManager`, and OData or WebAPI adaptors for remote sources.

It can shape legends, labels, colors, annotations, tooltips, zooming, panning, crosshairs, and selection. The material also covers financial indicators, technical analysis, accessibility, localization, printing, and export. WebMCP support uses `WebMcpChart` so a browser model context or AI agent can inspect and operate the rendered chart.

The React examples import `@syncfusion/ej2-react-charts`. Data labels have a strict placement rule: put them inside `marker.dataLabel`, rather than directly on a series.

## Install

### Claude Code (native platform)

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

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

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-charts/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-charts -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-charts/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-charts
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-charts/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-charts -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-charts/SKILL.md

## When to use it
- build a chart in a React application
- connect series to local or remote data
- configure axes, labels, and legends
- add zoom, tooltips, and selection
- expose a rendered chart through WebMCP

## Example prompts
- Create a React sales chart with two series, month-based categories, and a legend.
- Configure the chart with a date-time axis, tooltips, zooming, and data labels under `marker.dataLabel`.
- Add WebMCP support with `WebMcpChart`, set `enableWebMcp={true}`, and give the component a stable ID.

## Similar
- [swift-charts](https://affpapa.org/en/nevibecode/skills/swift-charts.md) — skill · 4000 installs
- [guide-swiftui-charts](https://affpapa.org/en/nevibecode/skills/guide-swiftui-charts.md) — skill · 429 installs
- [revenuecat-charts](https://affpapa.org/en/nevibecode/skills/revenuecat-charts.md) — skill · 757 installs
- [helm-charts](https://affpapa.org/en/nevibecode/skills/helm-charts.md) — skill · 357 installs
- [chart](https://affpapa.org/en/nevibecode/skills/chart.md) — skill · 3900 installs
- [d3-visualization](https://affpapa.org/en/nevibecode/skills/d3-visualization.md) — skill · 3100 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 37 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