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

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: 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): 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: 1. User wants web page + image : click "💾 Save Image" in page toolbar, saves to current project as screenshot.png 2. User wants image only : call screenshot chart(project dir) (Playwright) and send screenshot.png directly Toolbar Requirements Every chart page must include these buttons: 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.