ApexStock Skill

AI models routinely get stock-chart code wrong: forgetting that ApexCharts must be available as a global via window.ApexCharts, using flat o/h/l/c keys instead of the y: [o, h, l, c] array, calling update() on every tick instead of appendData(), or expecting several oscillators to run at once.

The ApexStock Skill is a context file you add to your project once. Your AI assistant reads it and generates correct ApexStock code from the start.

→ GitHub: apexcharts/apexstock-skill

Install

Claude Code

mkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/apexcharts/apexstock-skill.git

Cursor / Windsurf

curl -o .cursorrules https://raw.githubusercontent.com/apexcharts/apexstock-skill/main/.cursorrules

GitHub Copilot

Reference the skill file in Copilot Chat:

@workspace #file:SKILL.md How do I build a candlestick chart with indicators?

Or paste the contents of .cursorrules into your Copilot custom instructions so it applies to all conversations.

Generic AI (ChatGPT, Gemini, etc.)

Paste the contents of SKILL.md into your system prompt or attach it as context at the start of the conversation.

As an npm dependency

npm install apexstock-skill

import { skillFile, referencePath } from 'apexstock-skill';
import { readFile } from 'node:fs/promises';

const skill     = await readFile(skillFile, 'utf8');
const streaming = await readFile(referencePath('streaming-and-aggregation.md'), 'utf8');

What the skill covers

  • OHLC data format: series points as { x, y: [o, h, l, c], v? }, not flat o/h/l/c keys
  • ApexCharts global: ApexStock needs ApexCharts exposed on window before it initializes
  • Technical indicators: overlays (on the price pane) vs oscillators (in a separate pane), with only one oscillator active at a time
  • Real-time streaming: pushing ticks with appendData instead of re-rendering, plus ApexStock.aggregateOHLC for bucketing
  • Trading overlays: order, stop-loss, take-profit, and alert price lines
  • Theming: the scoped --apexstock-* CSS custom properties
  • Lifecycle: render(), update(), appendData(), and destroy()
  • Framework wrappers: react-apexstock, vue-apexstock, ngx-apexstock

Repository structure

├── SKILL.md                              # Main entry point
├── .cursorrules                          # Self-contained Cursor / Windsurf version
├── references/
│   ├── data-format.md                    # OHLC point shape, volume, time axis
│   ├── indicators.md                     # overlays vs oscillators
│   ├── streaming-and-aggregation.md      # appendData, aggregateOHLC
│   ├── trading-overlays.md               # order / stop-loss / take-profit / alert lines
│   ├── framework-wrappers.md             # React, Vue, Angular
│   └── theming.md                        # --apexstock-* tokens
└── install/
    ├── claude-code.md
    ├── cursor.md
    └── copilot.md

Repository

https://github.com/apexcharts/apexstock-skill

See also: ApexCharts Skill for the core charting library, plus the ApexStock docs and the ApexStock library on GitHub.