# syncfusion-react-stock-chart

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 642 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-stock-chart/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-stock-chart

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-stock-chart/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-stock-chart/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-stock-chart/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-stock-chart/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-stock-chart
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-stock-chart/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-stock-chart
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-stock-chart/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-stock-chart -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-stock-chart/SKILL.md

## When to use it
- 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
- 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

## Similar
- [blog-chart](https://affpapa.org/en/nevibecode/skills/blog-chart.md) — skill · 2500 installs
- [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill · 13 installs
- [stock-market-pro](https://affpapa.org/en/nevibecode/skills/stock-market-pro.md) — skill · 4100 installs
- [chart](https://affpapa.org/en/nevibecode/skills/chart.md) — skill · 3900 installs
- [swift-charts](https://affpapa.org/en/nevibecode/skills/swift-charts.md) — skill · 4000 installs
- [data-visualization](https://affpapa.org/en/nevibecode/skills/owl-listener-data-visualization.md) — skill · 2400 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 15 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md