# chart

Builds interactive charts on Apache ECharts: line, bar, candlestick, scatter. Outputs an HTML page plus a PNG screenshot.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3900 installs · ★ 29
- Author: Starchild-ai-agent
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Starchild-ai-agent/official-skills/tree/HEAD/chart/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/chart

## What it does

The skill writes each chart into its own project folder under `output/chart-html/`. Data sits inline in the HTML, so iframe CORS issues don't come up. Rendering runs on Apache ECharts from a CDN, and the image comes out through the native `getDataURL` export with a canvas merge.

Twelve templates ship with it: `line.html`, `bar.html`, `pie.html`, `candlestick.html`, `scatter.html`, `dashboard.html`, `radar.html`, `heatmap.html`, `dual-axis.html`, `multi-panel.html`, `waterfall.html`. You can also build from scratch with `build_chart_custom(...)`. Every project folder keeps `index.html`, `generate.py`, `data.json`, `README.md` and `screenshot.png`, which is what makes a chart reproducible later.

Preview goes through `chart_server.py`, not plain static hosting: the server rewrites `/preview/<id>/...` paths before touching the filesystem. Serve `output/chart-html` directly and the iframe shows a directory listing instead of your page. Image-only mode needs Playwright — `screenshot_chart(project_dir)` won't run without it.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill chart -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill chart -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Starchild-ai-agent/official-skills chart
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill chart -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path chart
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill 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/Starchild-ai-agent/official-skills/tree/HEAD/chart/SKILL.md

## When to use it
- plot a price series and compare two return curves
- assemble a KPI dashboard with a 2x2 chart grid
- render OHLCV candles from trading data
- break a budget variance into waterfall contributions
- export a chart as an image for a report

## Example prompts
- plot BTC vs gold over the last year using the line template
- make a bar chart of revenue by quarter in project revenue-q
- build a multi-panel with price, volume and RSI on one X axis

## Similar
- [echarts](https://affpapa.org/en/nevibecode/skills/echarts.md) — skill · 2700 installs
- [chart-designer](https://affpapa.org/en/nevibecode/skills/chart-designer.md) — skill · 5600 installs
- [hairline-create](https://affpapa.org/en/nevibecode/skills/hairline-create.md) — skill · 5200 installs
- [build-review-interface](https://affpapa.org/en/nevibecode/skills/build-review-interface.md) — skill · 970 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/adobe-prototype.md) — skill · 524 installs
- [huashu-design-html-native](https://affpapa.org/en/nevibecode/skills/huashu-design-html-native.md) — skill · 426 installs

From the same set: [starchild-ai-agent/official-skills](https://affpapa.org/en/nevibecode/by/starchild-ai-agent/official-skills.md) — 18 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