# syncfusion-react-3d-circular-chart

A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components.

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

## What it does

The skill covers `CircularChart3DComponent` from `@syncfusion/ej2-react-charts`. Your agent gets the install steps, the CSS theme import, and a working first chart: a `PieSeries3D` series, data bound through `xName` and `yName`, tilt set with the `tilt` property.

Behind it sits a set of reference files the agent pulls in by topic. Separate docs for pie and donut charts, data labels, legend, tooltip, empty points, title and subtitle, print and export, plus an API summary. Each feature needs its own module in `Inject`: `CircularChartDataLabel3D`, `CircularChartLegend3D`, `CircularChartTooltip3D`. Skip the module and that part of the chart stays blank.

Donut mode comes from `innerRadius`, and radius is set as a percentage of the container. Null values go through `emptyPointSettings` with Gap, Average, Drop and Zero modes. Export covers PNG, JPEG, SVG and PDF. The skill assumes a React app built with Vite or Create React App, so it is no help in plain HTML pages.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

## When to use it
- render a 3D pie chart from a list of categories
- turn a pie chart into a donut with a hollow center
- label slices with values and push labels outside the chart
- place a legend on the side with paging for many items
- export the chart to PDF or PNG from a button click

## Example prompts
- Build a 3D pie chart of browser market share with Syncfusion, legend on the right, labels outside
- Convert this pie chart to a donut with a 40% inner radius
- Add a button that exports the chart to PDF

## Similar
- [blog-chart](https://affpapa.org/en/nevibecode/skills/blog-chart.md) — skill · 2500 installs
- [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill · 13 installs
- [chart](https://affpapa.org/en/nevibecode/skills/chart.md) — skill · 3900 installs
- [data-visualization](https://affpapa.org/en/nevibecode/skills/owl-listener-data-visualization.md) — skill · 2400 installs
- [analytics-metrics](https://affpapa.org/en/nevibecode/skills/analytics-metrics.md) — skill · 380 installs
- [data-viz-2025](https://affpapa.org/en/nevibecode/skills/data-viz-2025.md) — skill · 304 installs

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