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

syncfusion-react-charts — Claude Code skill: setup and use

This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. Use it for dashboards and analytics views.

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

What syncfusion-react-charts does

The skill guides React implementations of the Syncfusion Chart component. It covers line, bar, column, area, scatter, pie, doughnut, polar, and radar charts, along with category, numeric, date-time, and logarithmic axes. It also describes multiple series, local data, DataManager, and OData or WebAPI adaptors for remote sources.

It can shape legends, labels, colors, annotations, tooltips, zooming, panning, crosshairs, and selection. The material also covers financial indicators, technical analysis, accessibility, localization, printing, and export. WebMCP support uses WebMcpChart so a browser model context or AI agent can inspect and operate the rendered chart.

The React examples import @syncfusion/ej2-react-charts. Data labels have a strict placement rule: put them inside marker.dataLabel, rather than directly on a series.

What it helps with

  • build a chart in a React application
  • connect series to local or remote data
  • configure axes, labels, and legends
  • add zoom, tooltips, and selection
  • expose a rendered chart through WebMCP

Example prompts for the agent

  • Create a React sales chart with two series, month-based categories, and a legend.
  • Configure the chart with a date-time axis, tooltips, zooming, and data labels under marker.dataLabel.
  • Add WebMCP support with WebMcpChart, set enableWebMcp={true}, and give the component a stable ID.

How to install syncfusion-react-charts

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-charts/SKILL.md

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

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

Questions about syncfusion-react-charts

How do I install syncfusion-react-charts in Claude Code?

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

What does syncfusion-react-charts do?

It guides Syncfusion chart work in React, from choosing a chart type and binding data to configuring axes, series, styling, and interactive behavior.

Where should React chart data labels be configured?

Place the data-label settings inside marker.dataLabel; the skill specifically distinguishes this from putting them directly on a series. It also covers local data, DataManager, OData adaptors, and live series updates.

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-accumulation-chart This skill guides React implementations of Pie, Doughnut, Funnel, and Pyramid charts. Use it for proportional data, percentage views, and hierarchical displays. CX Codex +1 711installs 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

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