syncfusion-react-3d-circular-chart — Claude Code skill: 3D circular
A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a claude-codeWhat syncfusion-react-3d-circular-chart 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.
What it helps with
- 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 for the agent
- 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
How to install syncfusion-react-3d-circular-chart
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-3d-circular-chart/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-3d-circular-chart/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-3d-circular-chart/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-3d-circular-chart/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-3d-circular-chart2Manually: put the files in place
.github/skills/syncfusion-react-3d-circular-chart/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-3d-circular-chartManually: put the files in place
.devin/skills/syncfusion-react-3d-circular-chart/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about syncfusion-react-3d-circular-chart
How do I install syncfusion-react-3d-circular-chart in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-circular-chart -a claude-code. The skill lands in ~/.claude/skills/syncfusion-react-3d-circular-chart/SKILL.md.
What does syncfusion-react-3d-circular-chart do?
It guides your agent through setting up Syncfusion 3D pie and donut charts in React: series, data labels, legend, tooltips, empty points, printing and export.
Which modules do I need to inject?
One per feature: PieSeries3D for the series, CircularChartDataLabel3D for labels, CircularChartLegend3D for the legend, CircularChartTooltip3D for tooltips.
