Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-accumulation-chart — Claude Code skill

This skill guides React implementations of Pie, Doughnut, Funnel, and Pyramid charts. Use it for proportional data, percentage views, and hierarchical displays.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accumulation-chart -a claude-code
Open on GitHub

What syncfusion-react-accumulation-chart does

The skill covers Syncfusion’s React AccumulationChartComponent and its four chart modes: Pie, Doughnut, Funnel, and Pyramid. It gives the agent the details needed for data binding, legends, tooltips, labels, grouping, and label placement that avoids collisions. The examples also address semi-pie layouts and point emphasis.

It includes patterns for drill-down charts, annotations, themes, custom colors, pattern fills, accessibility, export, and printing. The project needs @syncfusion/ej2-react-charts before these components can be implemented. That dependency is the main setup point to check first.

What it helps with

  • build a proportional Pie chart from React data
  • show percentage values in a Doughnut view
  • map stages of a process to a Funnel chart
  • combine small points into a grouped segment
  • add labels and tooltips to chart slices

Example prompts for the agent

  • Create a React Pie chart from the sales data with a legend, labels, and tooltips.
  • Configure AccumulationChartComponent as a Doughnut chart, grouping small values and emphasizing the selected point.
  • Build a Funnel chart with smart labels and drill-down when a segment is clicked.

How to install syncfusion-react-accumulation-chart

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accumulation-chart -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-accumulation-chart/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-accumulation-chart/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-accumulation-chart

How do I install syncfusion-react-accumulation-chart in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-accumulation-chart -a claude-code, then use ~/.claude/skills/syncfusion-react-accumulation-chart/SKILL.md.

What does syncfusion-react-accumulation-chart do?

It guides React chart work with Syncfusion’s Pie, Doughnut, Funnel, and Pyramid components, including labels, legends, tooltips, grouping, and drill-down behavior.

Which package is needed for this skill?

The project uses @syncfusion/ej2-react-charts for the chart components.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set37

syncfusion-react-license Walks through Syncfusion licensing in React apps: issuing a key, registering it, and clearing validation errors. Useful when your build starts warning about licenses. CX Codex +1 718installs syncfusion-react-image-editor A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app. CX Codex +1 718installs syncfusion-react-chat-ui This skill helps build React chat interfaces with messages, attachments, typing states, user presence, and configurable layouts. CX Codex +1 715installs syncfusion-react-tabs Guides the agent through building and customizing Syncfusion Tab components in React: headers, drag-and-drop, content rendering. CX Codex +1 715installs syncfusion-react-barcode A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. Useful when codes go into a form, report or label. CX Codex +1 711installs syncfusion-react-pivot-table Build and customize Syncfusion PivotView in React with guidance for data binding, grouping, filters, aggregation, exports, and pivot charts. CX Codex +1 709installs syncfusion-react-dashboard-layout A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. CX Codex +1 709installs syncfusion-react-maps Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region. CX Codex +1 707installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor