chart

Q: How do I install chart?

Run npx skills add https://github.com/starchild-ai-agent/official-skills --skill chart in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chart/ (personal) or .claude/skills/chart/ (project).

by starchild-ai-agentFrontend & Design

Interactive web charts: line, bar, candle, scatter, with HTML and screenshot output. Use when visualizing data for analysis or BI (e.g. plot BTC vs gold last year, bar chart of revenue by quarter, compare two return series).

Installs: 3.9K
Last 24h: —
Trending rank: —
Security: Warn

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/starchild-ai-agent/official-skills --skill chart

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads chart automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill facilitates the generation of interactive charts using Apache ECharts. It supports creating project-based chart artifacts, including HTML pages, data snapshots, and automated screenshots via Playwright. While the skill is generally well-structured and implements path traversal protections for its local server, it lacks input sanitization when constructing HTML from data, posing a minor risk for indirect prompt injection. Additionally, it generates Python scripts to allow for chart reproducibility, which is a form of dynamic script generation.

Socket Warn1 alert: gptAnomaly

Snyk WarnMEDIUM ·Risk: MEDIUM · 1 issue

ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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.py
save_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.py now rewrites preview-prefixed static paths internally (/preview/<id>/... → /...) before filesystem lookup.
This guarantees the preview iframe resolves the real project index.html instead of falling back to root directory listing.
Keep project pages under output/chart-html/<project>/index.html (do not serve output/chart-html directly as a static preview without chart_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 send screenshot.png directly

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.

FAQ

What does the chart skill do?

How do I install chart?

Run npx skills add https://github.com/starchild-ai-agent/official-skills --skill chart in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chart/ (personal) or .claude/skills/chart/ (project).

Which AI agents can use chart?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is chart safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket flagged items to review; Snyk flagged items to review; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains chart?

It is published by starchild-ai-agent in starchild-ai-agent/official-skills. It has 3,932 recorded installs.