syncfusion-react-sparkline — Claude Code skill for React mini charts
Guides the agent through building Syncfusion sparklines in React: five chart types, tooltips, markers and range bands where a full chart will not fit.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a claude-codeWhat syncfusion-react-sparkline does
The skill covers SparklineComponent from @syncfusion/ej2-react-charts: wiring a data source, switching chart type, adding tooltips and data labels. Reference files walk through each topic, including all five types (line, column, area, win-loss, pie), markers, range bands, axis setup and the Material, Fabric, Bootstrap and Highcontrast themes.
You need the package in the project before any of this works: npm install @syncfusion/ej2-react-charts --save. Tooltips are a separate module, so SparklineTooltip has to go into the Inject list; skip that and the tooltip settings do nothing. Use it for a trend inside a table cell or a dashboard tile, where a normal chart eats the layout.
One reference section is about accessibility, with WCAG 2.2 and Section 508 coverage, WAI-ARIA roles and RTL layouts. Check your own keyboard and contrast requirements against it before writing markup, not after the review comes back.
What it helps with
- drop a trend chart into a table cell
- show proportions as a compact pie sparkline
- flag the high and low points with markers
- add a hover tooltip with the point values
- shade an acceptable value range with a band
Example prompts for the agent
- Build an Area sparkline from
[0, 6, 4, 1, 3, 2, 5]and turn on a tooltip formatted as${x} : ${y} - Put markers on the first and last points of the dashboard card sparkline
- Render a win-loss sparkline for the latest match results in the results table
How to install syncfusion-react-sparkline
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-sparkline/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-sparkline/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-sparkline/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-sparkline/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-sparkline2Manually: put the files in place
.github/skills/syncfusion-react-sparkline/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-sparklineManually: put the files in place
.devin/skills/syncfusion-react-sparkline/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -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-sparkline
How do I install syncfusion-react-sparkline in Claude Code?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sparkline -a claude-code. The skill lands at ~/.claude/skills/syncfusion-react-sparkline/SKILL.md.
What does syncfusion-react-sparkline do?
It gives the agent working notes on Syncfusion's React sparkline component: chart types, tooltips, markers, data labels, range bands and axis settings.
Why is no tooltip showing up?
Tooltips come from a module you register yourself. Add SparklineTooltip to the Inject services inside SparklineComponent, or the tooltip config is ignored.
