Chart

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.

skills.sh installs: 3.9K
GitHub stars: 32
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add starchild-ai-agent/official-skills --skill chart --agent claude-code

Installs into .claude/skills of the current project.

Files

logo.png

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