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

syncfusion-react-stock-chart — Claude Code skill: React stock charts

A skill that walks your agent through building a stock chart with the Syncfusion Stock Chart component in React: candles, OHLC, indicators.

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

What syncfusion-react-stock-chart does

The skill covers StockChartComponent from the @syncfusion/ej2-react-charts package. Your agent gets the shape of OHLC data (open, high, low, close, volume), six series types from line to hollow candle, axis setup, and module injection through Inject.

Reference files are split by topic: getting started, axis types, series, period and range selectors, interactive features, technical analysis. Period selector buttons like 1D, 5D and 1M are documented, along with a range navigator you drag by thumbs. For analysis there are indicators such as SMA, EMA, RSI, MACD and Bollinger Bands, plus annotations for events like dividends and splits.

This assumes a React project with the Syncfusion package in place. If your app already has a charting layer, pulling in a second library for one view is worth a second look before you commit.

What it helps with

  • render a stock's price movement as candlesticks or OHLC bars
  • add quick period buttons for 1D, 5D, 1M and 1Y ranges
  • let users drag a date range with navigator thumbs
  • overlay SMA, MACD or Bollinger Bands on price data
  • mark dividends, splits and earnings on the chart

Example prompts for the agent

  • Build a stock chart with Syncfusion Stock Chart: candles from open/high/low/close plus volume
  • Add a period selector with 1D, 5D, 1M, 6M, YTD, 1Y and ALL buttons
  • Overlay SMA and MACD on the candlestick chart and turn on the crosshair tooltip

How to install syncfusion-react-stock-chart

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-stock-chart

How do I install syncfusion-react-stock-chart in Claude?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart -a claude-code. The skill file then sits at ~/.claude/skills/syncfusion-react-stock-chart/SKILL.md.

What does syncfusion-react-stock-chart do?

It gives the agent instructions for the Syncfusion Stock Chart component in React: series types, axes, period and range selectors, indicators and chart events.

Which technical indicators are supported?

Moving averages SMA, EMA and TMA, momentum indicators RSI, MACD and Stochastic, volume tools Accumulation Distribution and ATR, and Bollinger Bands.

Similar skills

Everything for Frontend and UI →
blog-chart AgriciDaniel Builds inline SVG charts for blog posts in HTML or MDX. The orchestrator calls it automatically when resolving data markers during blog-write runs. CX Codex +1 2,500installs react-and-nextjs-data-visualization official OpenAI Patterns for embedding charts and diagrams into React and Next.js: SSR boundaries, hydration safety, URL-backed state, and isolated rendering layers. CX Codex GP ChatGPT 13installs stock-market-pro sundial-org A skill for stock, crypto and forex analysis: pulls quotes, fundamental metrics and renders candlestick charts right in the terminal. CX Codex +1 4,100installs chart Starchild-ai-agent Builds interactive charts on Apache ECharts: line, bar, candlestick, scatter. Outputs an HTML page plus a PNG screenshot. CX Codex +1 3,900installs swift-charts dpearson2699 A skill that steers your coding agent through Swift Charts work on iOS 26+. Useful for bars, lines, donuts, heat maps and 3D surfaces. CX Codex +1 4,000installs data-visualization Owl-Listener Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. CX Codex +1 2,400installs

From the same set15

syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 700installs syncfusion-react-popups A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components. CX Codex +1 658installs syncfusion-react-3d-chart 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. CX Codex +1 656installs syncfusion-react-notifications A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. Useful when you need status indicators without digging through docs. CX Codex +1 654installs syncfusion-react-timeline Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. Useful for roadmaps, shipping tracking and activity feeds. CX Codex +1 650installs syncfusion-react-smithchart A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work. CX Codex +1 647installs syncfusion-react-3d-circular-chart A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components. CX Codex +1 646installs syncfusion-react-sankey A skill that walks your coding agent through building Sankey diagrams in React with the Syncfusion chart component: nodes, links, legend, tooltips and export. CX Codex +1 644installs

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