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/

/

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///index.html

Important behavior in v3.0.1:

chart_server.py

now rewrites preview-prefixed static paths internally (

/preview//...

→

/...

) 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//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// 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.

安装