syncfusion-react-3d-chart — Claude Code skill for React 3D charts
This skill walks your agent through Syncfusion 3D column and bar charts in a React app. Handy when a chart needs axes, a legend and export.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a claude-codeWhat syncfusion-react-3d-chart does
The skill covers the Chart3DComponent from the @syncfusion/ej2-react-charts package. It ships as a set of reference files: chart types (column, bar, stacked and 100% stacked), data binding, axis setup (category, numeric, datetime, logarithmic), multiple panes, data labels, legend, tooltips, selection, print and export, theming, accessibility.
Data goes in through dataSource with xName and yName, and series sit inside Chart3DSeriesCollectionDirective. Rotation, tilt and depth are props on the root component. Every series module has to be listed in Inject — a missing ColumnSeries3D or Category3D renders an empty chart, so check that first when something looks broken.
The skill does not install @syncfusion/ej2-react-charts for you; that package belongs to your project. Several topics live only in the references/ files, so the agent reads them per task rather than from one long document.
What it helps with
- build a 3D column chart from an array of records
- set up a logarithmic axis for exponential data
- add a secondary Y axis and split series across panes
- export a chart to PNG or PDF
- show data labels, legend and shared tooltips
Example prompts for the agent
- build a 3D column chart by month with a legend and data labels
- switch the X axis to datetime and set the date format
- add PDF export and apply the Tailwind theme
How to install syncfusion-react-3d-chart
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-3d-chart/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-3d-chart/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-3d-chart/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-3d-chart/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-3d-chart2Manually: put the files in place
.github/skills/syncfusion-react-3d-chart/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-3d-chartManually: put the files in place
.devin/skills/syncfusion-react-3d-chart/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-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-chart
How do I install syncfusion-react-3d-chart in Claude?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-3d-chart -a claude-code. The skill file then lands at ~/.claude/skills/syncfusion-react-3d-chart/SKILL.md.
What does syncfusion-react-3d-chart do?
It guides the agent through Syncfusion 3D chart code for React: series types, axes, data binding, panes, legend, export, theming and accessibility.
Do I still need the @syncfusion/ej2-react-charts package?
Yes. The skill documents components from @syncfusion/ej2-react-charts, and that package is installed in your project separately.
