chart — Claude Code skill: interactive ECharts pages
Builds interactive charts on Apache ECharts: line, bar, candlestick, scatter. Outputs an HTML page plus a PNG screenshot.
npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-codeWhat chart 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.
What it helps with
- 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 for the agent
- 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
How to install chart
1Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-code2Manually: put the files in place
~/.claude/skills/chart/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/chart/
1Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a codex2Manually: put the files in place
.agents/skills/chart/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a cursor2Manually: put the files in place
.cursor/skills/chart/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Starchild-ai-agent/official-skills chart2Manually: put the files in place
.github/skills/chart/SKILL.md1Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a gemini-cli2Platform CLI
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path chartManually: put the files in place
.devin/skills/chart/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Starchild-ai-agent/official-skills --skill chart -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about chart
How do I install chart in Claude?
Run npx skills add Starchild-ai-agent/official-skills --skill chart -a claude-code. The skill file then lives at ~/.claude/skills/chart/SKILL.md.
What does the chart skill do?
It generates interactive chart pages with Apache ECharts and stores them in a dedicated project folder. It can also hand back a PNG screenshot.
Why does the preview show a file listing instead of the chart?
The folder is probably being served as plain static files. Start chart_server.py instead — it rewrites /preview/<id>/... paths and resolves the real index.html.
