Summary
Spins up interactive ECharts visualizations with proper project scaffolding. Each chart gets its own folder under output/chart-html with HTML, data snapshot, generation script, and PNG export. Ships with nine templates covering the usual suspects: line, bar, candlestick, plus a few nice ones like dual-axis for different scales and multi-panel for stacked indicators. The export logic uses ECharts native getDataURL instead of fighting with external screenshot tools, and the preview server rewrites paths so iframe serving actually works. Good for when you need a chart that lives beyond the conversation, not just a throwaway plot.
Install to Claude Code
npx -y skills add starchild-ai-agent/official-skills --skill chart --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.mdView on GitHub
Chart — Project-Based Interactive Charting
Generate interactive chart pages with Apache ECharts. Each chart lives in a dedicated project folder under output/chart-html/, making it easy to reuse and iterate.
When to Use
Any time the user wants a visual chart: price charts, comparisons, dashboards, business analytics, etc.
Architecture
- ECharts (CDN) for rendering
- ECharts native export (
getDataURL) + canvas merge for reliable PNG output - Project-based storage: one folder per chart project
- No gallery mode: all artifacts stay in the project folder
Project Structure (Required)
Each chart project should follow:
output/chart-html/
<project-name>/
index.html # chart page
generate.py # generation script (for reproducibility)
README.md # title / description / data source notes
data.json # data snapshot
screenshot.png # saved image
Example folder name: btc-90d-20260401
Workflow
Step 1: Pick template or custom layout
Available templates:
| Template | Best for |
|---|---|
line.html | Time-series trends, multi-series comparisons |
bar.html | Category comparisons, rankings |
pie.html | Composition / share breakdown |
candlestick.html | OHLCV price charts |
scatter.html | Correlation, distribution |
dashboard.html | KPI cards + 2×2 multi-chart grid |
radar.html | Multi-dimension scoring |
heatmap.html | Matrix / calendar intensity |
dual-axis.html | Two series with very different scales (e.g. market cap vs stablecoin supply) — left and right Y axes, each with its own label color |
multi-panel.html | Stacked panels sharing one X axis (e.g. price + volume + RSI) — single ECharts instance, tooltip/zoom synced across all panels |
waterfall.html | Incremental contribution breakdown (e.g. P&L attribution, budget variance) — positive/negative bars stacked on a floating base |
Step 2: Create project folder
Use create_project(name, description, data_sources) from scripts/build_chart.py.
Step 3: Build and save chart page
Use either:
build_chart(template_name, ...)build_chart_custom(...)
Then save as index.html in the project folder:
save_chart(html, project_dir=project_dir)
Step 4: Save reproducible assets
Also save:
save_generate_script(script_content, project_dir)→generate.pysave_data(data, project_dir)→data.json- project README is created by
create_project(...)
Step 5: Serve preview
Use project-root serving (recommended):
preview_serve(
title="Chart Preview",
dir="skills/chart/scripts",
command="python3 chart_server.py /data/workspace/output/chart-html 7860",
port=7860
)
Then open: /preview/<id>/<project-name>/index.html
Important behavior in v3.0.1:
chart_server.pynow rewrites preview-prefixed static paths internally (/preview/<id>/...→/...) before filesystem lookup.- This guarantees the preview iframe resolves the real project
index.htmlinstead of falling back to root directory listing. - Keep project pages under
output/chart-html/<project>/index.html(do not serveoutput/chart-htmldirectly as a static preview withoutchart_server.py).
Step 6: Export image
Two modes:
- User wants web page + image: click "💾 Save Image" in page toolbar, saves to current project as
screenshot.png - User wants image only: call
screenshot_chart(project_dir)(Playwright) and sendscreenshot.pngdirectly
Toolbar Requirements
Every chart page must include these buttons:
<div class="actions">
<button onclick="downloadPNG(this)">📥 Download PNG</button>
<button onclick="copyToClipboard(this)">📋 Copy Image</button>
<button onclick="saveToProject(this)">💾 Save Image</button>
</div>
Do not include gallery entry.
Key Files
| File | Purpose |
|---|---|
skills/chart/scripts/base-styles.css | Base dark theme CSS |
skills/chart/scripts/base-export.js | Export helpers: download/copy/save-to-project |
skills/chart/scripts/build_chart.py | Project creation, HTML build, data/script save, screenshot |
skills/chart/scripts/chart_server.py | Static server + /save-chart API |
skills/chart/templates/*.html | Reusable chart templates |
output/chart-html/<project>/* | All generated chart artifacts |
Notes
- Embed data directly in HTML (
const DATA = ...) to avoid iframe CORS issues. - For multi-chart pages, register all chart instances in
window.CHART_INSTANCES. - Use meaningful project names (
topic-range-date) for easy lookup.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
