| name | text2echart |
| name-zh | Data to Chart |
| provider | openclaw |
| description | Chart generator skill. When triggered: - Default: CONSTRUCT ECharts option JSON and output HTML string directly and render by mermaid and support preview. - Image / vector (ๅพ็/็ข้ๅพ): use CLI with --svg-output (or --svg --embed for offline). - Screenshot (ๆชๅพ): use CLI with --screenshot (needs Playwright). - Fine-tuning (ๅพฎ่ฐ/ไฟฎๆน): open browser for interactive adjustment. Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud (via JSON). Trigger words: chart, graph, visualize, plot, draw, wordcloud, vent drawๅพ่กจ, ็ปๅพ, ๅฏ่งๅ, ๅพ็, ็ข้ๅพ, ่ฏไบ.
|
| disable-model-invocation | true |
| user-invocable | true |
| metadata | {"version":"2.3.2","launch":"text2echarts.html","trigger-keywords":["chart","graph","visualize","plot","make a chart","draw a graph","ๅพ่กจ","็ปๅพ","ๅฏ่งๅ","ๆฑ็ถๅพ","้ฅผๅพ","ๅพ็","็ข้ๅพ","wordcloud","vent draw","่ฏไบ"],"tags":["visualization","echarts","chart","data-viz","svg"]} |
text2echart โ Data to Chart
Invocation Model
text2echart is a chart-generation skill configured with safety-first invocation settings:
-
disable-model-invocation: true โ The AI model will never automatically invoke this skill on its own. text2echart requires explicit user invocation โ you must explicitly ask for a chart, graph, visualization, or use one of the trigger keywords before the skill is activated. This prevents the model from generating charts without your awareness, especially when sensitive data is involved.
-
user-invocable: true โ You (the user) can explicitly invoke this skill at any time by using trigger keywords like chart, graph, visualize, plot, draw, wordcloud, ๅพ่กจ, ็ปๅพ, ๅฏ่งๅ, etc.
Why these settings matter: Chart generation can involve processing uploaded data files (CSV/JSON) and rendering executable HTML content. Requiring explicit user invocation ensures there is always a conscious human decision before data is processed into visualizations.
โก Routing
case when: user asks for a chart / graph / visualization (default):
- Construct ECharts option JSON
- Output HTML string directly, render with ```html code block
- Support preview by opening in browser or screenshot
Default route โ direct HTML generation in chat.
Example prompt: "Give me a pie chart of browser market share โ Chrome 65%, Safari 18%, Edge 8%, Firefox 5%, Other 4%"
โ The model outputs a complete HTML file with an interactive ECharts pie chart.
case when: user asks for an image / picture / vector graphic (ๅพ็/็ข้ๅพ):
- Use CLI with SVG output:
node cli.js data.json --svg-output -o chart.svg
--svg-output extracts standalone .svg file (requires Playwright)- Add
--embed to bundle ECharts lib for fully offline use
- SVG is vector format โ sharp at any resolution, ideal for documents
- Also send PNG screenshot for instant preview
case when: user asks for a screenshot / snapshot (ๆชๅพ):
- Use CLI with screenshot:
node cli.js data.json --screenshot -o chart.png
- This generates high-quality raster PNG via Playwright
- If Playwright is not installed, falls back with clear error + install instructions
case when: user wants to fine-tune / adjust / modify the chart (ๅพฎ่ฐ/ไฟฎๆน):
- Open browser:
node cli.js data.json --open
- Or open the generated HTML directly for interactive editing
case when: user asks to save to file / run locally:
- Use CLI:
node cli.js data.json -o chart.html (CDN mode, ~1KB)
- For offline use: add
--embed (~1MB)
- Can combine with --open or --screenshot
case when: user asks for word cloud (่ฏไบ):
- Need word frequency data first (ๅ่ฏ + ่ฏ้ข็ป่ฎก)
- Generate ECharts wordcloud option JSON with type:'wordCloud'
- Then follow image/vector or html/web route based on output format request
- Point to
text2echarts.html
- Open in browser, use templates and export
Output Format
<!DOCTYPE html><html lang="en"><head>...echarts CDN...<style>...</style></head><body><div id="chart"></div><script>...echarts option...</script></body></html>
Overview
Generate ECharts SVG charts from JSON/CSV. Two entry points:
Web App: Open text2echarts.html in browser for interactive GUI with templates, live preview, theme switching, and PNG/JPG/SVG export.
CLI: node cli.js for scripted/batch generation.
When to Use / When Not to Use
| Scenario | Use text2echart? |
|---|
| "Make a bar chart from this CSV" | โ
Best fit |
| "Visualize my sales data" | โ
Natural language input works |
| "Compare trends across months" | โ
Line chart, multi-series |
| "Show market share distribution" | โ
Pie chart with % labels |
| "I need an interactive chart dashboard" | โ ๏ธ Open text2echarts.html instead |
| "Animate this chart frame by frame" | โ ECharts not designed for animation frames |
| "Generate 100 charts in batch" | โ
Use CLI: for f in *.csv; do node cli.js \$f; done |
| "Real-time streaming data" | โ Use ECharts live update API directly |
Quick Start
open text2echarts.html
node cli.js data.csv --open
node cli.js chart.json -o report.html
Supported Inputs
| Format | Example | Auto-detected |
|---|
| CSV | Month,Sales\nJan,1200\nFeb,900 | โ
yes (comma in first line) |
| JSON | {"series":[{"type":"bar","data":[30,80]}]} | โ
yes (starts with {) |
| JSON (simple) | {"type":"bar","data":[{"name":"A","value":30}]} | โ
yes |
| Stdin pipe | cat data.csv | node cli.js - | โ
use - |
CLI Reference
node cli.js <input> [options]
Options:
-o, --out <file> Output file name
--type <type> Chart type for CSV: bar|line|pie|radar|wordcloud
--theme <name> dark|infographic|macarons|roma|shine|vintage
--width / --height Chart dimensions
--svg SVG renderer (default)
--svg-output Output standalone .svg file (needs Playwright)
--screenshot Output PNG screenshot (needs Playwright)
--open Open in browser after generation
--cdn Use CDN for ECharts lib (default)
--embed Embed ECharts lib for offline (~1MB)
--slide 960x540 PPT slide mode
Chart Types
| Type | CSV columns | Auto features |
|---|
| bar | col1=labels, col2+=values | Rounded corners, top labels |
| line | col1=labels, col2+=values | Smooth curves, area fill |
| pie | col1=name, col2=value | Donut chart, % labels |
| scatter | col1=x, col2=y | Bubble symbols |
| radar | col1=dimension, col2+=values | Polygon shape |
| wordcloud | col1=word, col2=frequency | Diamond shape |
Themes
| Theme | Style | Background |
|---|
| dark | Tech, deep blue | #1a1a2e |
| infographic | Clean report | #f5f5f5 |
| macarons | Soft, business | #f5f5f5 |
| vintage | Nostalgic | #f5f5f5 |
| shine | Bright, vivid | #f5f5f5 |
| roma | Professional | #f5f5f5 |
Few-Shot Examples
1. CSV โ Bar Chart
User: "Chart these monthly sales"
Month,Sales
Jan,1200
Feb,900
Mar,1600
โ CLI auto-detects CSV, generates bar chart with labels, tooltips, rounded corners.
2. JSON โ Pie with Percentages
{
"series": [{
"type": "pie",
"radius": ["40%", "70%"],
"data": [
{"value": 48, "name": "Chrome"},
{"value": 22, "name": "Firefox"},
{"value": 18, "name": "Safari"}
],
"label": {"formatter": "{b}\n{d}%"}
}],
"title": {"text": "Market Share"}
}
3. CSV โ Multi-series Line
Date,Revenue,Cost
Jan,1200,800
Feb,1500,900
Mar,1800,1100
node cli.js data.csv --type line --theme dark --open
Architecture
Input (JSON/CSV)
โ cli.js parses & converts to ECharts option
โ Option JSON injected into HTML template
โ echarts.init(dom, theme, {renderer:"svg"})
โ Output: self-contained .html with CDN references (~1KB)
โ --embed flag: inline ECharts lib (~1MB, offline)
โ --screenshot flag: PNG via Playwright
โ --svg-output flag: standalone SVG via Playwright
Dependencies
- CLI: Node.js only (stdlib, no npm packages)
- Runtime: Internet for ECharts CDN (or
--embed for offline)
- Zero npm install required
References
| File | Content |
|---|
prompt.md | Prompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user template |
references/echarts-option-reference.md | Full ECharts option API (EN, from official site) |
references/echarts-option-zh.md | Full ECharts option API (ไธญๆ) |
references/echarts-wordcloud.md | Wordcloud extension docs |
references/echarts-zh-title.md | title ้้กน่ฏฆ็ป่ฏดๆ |
references/echarts-zh-grid.md | grid ้้กน่ฏฆ็ป่ฏดๆ |
references/echarts-zh-xAxis.md | xAxis ้้กน่ฏฆ็ป่ฏดๆ |
references/echarts-zh-yAxis.md | yAxis ้้กน่ฏฆ็ป่ฏดๆ |
references/echarts-zh-series-bar.md | series.bar ๆฑ็ถๅพ้
็ฝฎ |
references/echarts-zh-series-line.md | series.line ๆ็บฟๅพ้
็ฝฎ |
references/echarts-zh-series-pie.md | series.pie ้ฅผๅพ้
็ฝฎ |
references/echarts-zh-series-scatter.md | series.scatter ๆฃ็นๅพ |
references/echarts-zh-series-radar.md | series.radar ้ท่พพๅพ |
references/echarts-zh-tooltip.md | tooltip ๆ็คบๆก้
็ฝฎ |
references/echarts-zh-legend.md | legend ๅพไพ้
็ฝฎ |
references/echarts-zh-color.md | color ่ฐ่ฒ็ |
references/echarts-zh-label.md | label ๆฐๆฎๆ ็ญพ |
references/echarts-zh-emphasis.md | emphasis ้ซไบฎ็ถๆ |
references/echarts-zh-smooth.md | smooth ๅนณๆปๆฒ็บฟ |
references/echarts-zh-axisLabel.md | axisLabel ๅๆ ่ฝดๆ ็ญพ |
Prompt Guide
For LLM-based chart generation, see prompt.md โ a complete prompt engineering guide with:
- Core prompt pattern for ECharts option generation
- Chain-of-thought reasoning for chart type selection
- 3 Few-Shot examples (bar, pie, line)
- 16 detailed option references with JSON examples
- Common mistakes checklist
- Copyable end-user prompt template
Interactive Web App
For a full GUI experience, open text2echarts.html in your browser.
Features: live preview, templates, theme switching, export PNG/JPG/SVG.
web/
โโโ text2echarts.html # English (default, lang toggle)
โโโ app.js # Core logic (i18n via JSON)
โโโ styles.css # Shared styles
โโโ templates.js # Chart templates (CN/EN)
โโโ lang/ # JSON language packs
Key ECharts Options Reference
Refer to these when constructing chart configurations. Official docs:
| Option | What it does | Concrete example | Link |
|---|
title | Chart title | {"text":"Sales","left":"center","textStyle":{"fontSize":18}} | โ docs |
grid | Chart margins | {"left":"3%","right":"4%","bottom":"10%","containLabel":true} โ containLabel prevents axis labels from being clipped | โ docs |
xAxis | X axis | {"type":"category","data":["Jan","Feb"],"axisLabel":{"rotate":45}} โ type must be category or value | โ docs |
yAxis | Y axis | {"type":"value","name":"Units"} โ add name for axis label text | โ docs |
series.type:'bar' | Bar chart | {"type":"bar","data":[30,80],"itemStyle":{"borderRadius":[4,4,0,0]},"label":{"show":true,"position":"top"}} | โ docs |
series.type:'line' | Line chart | {"type":"line","data":[22,25,23],"smooth":true,"areaStyle":{"opacity":0.1},"lineStyle":{"width":3,"shadowBlur":10}} | โ docs |
series.type:'pie' | Pie/donut | `{"type":"pie","radius":["40%","70%"],"data":[{"value":48,"name":"A"}],"label":{"formatter":"{b}\ | |
| {d}%"},"emphasis":{"label":{"fontSize":16}}}` | โ docs | | |
series.type:'scatter' | Scatter | {"type":"scatter","data":[[160,55],[170,65]],"symbolSize":12} | โ docs |
series.type:'radar' | Radar | {"type":"radar","data":[{"value":[90,75],"name":"Score"}]} + radar.indicator | โ docs |
tooltip | Hover info | {"trigger":"axis"} for bar/line (axis-level), {"trigger":"item","formatter":"{b}:{c}"} for pie | โ docs |
legend | Series names | {"data":["Sales","Profit"],"bottom":"0"} โ data must match series name | โ docs |
color | Color palette | ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"] โ ECharts default 5-color palette | โ docs |
label | Data labels | {"show":true,"position":"top","formatter":"{c}","fontSize":14} โ position: top/inside/outside/bottom | โ docs |
emphasis | Highlight state | {"label":{"fontSize":16,"fontWeight":"bold"}} โ triggered on hover | โ docs |
smooth | Curve lines | true for curved line chart, false (default) for polyline | โ docs |
itemStyle.borderRadius | Rounded bars | [4,4,0,0] โ top-left, top-right, bottom-right, bottom-left | โ docs |
axisLabel.rotate | Rotate X labels | 45 degrees โ useful when labels overlap (10+ categories) | โ docs |
See also: references/echarts-option-reference.md (EN) and references/echarts-option-zh.md (CN)
Common Issues
| Problem | Cause | Fix |
|---|
| Blank chart | CDN blocked or no internet | Use --embed flag for local libs (~1MB) |
| SVG not rendering | Old browser version | Chrome/Firefox 2020+ required |
| Wordcloud missing | Missing wordcloud extension | Included in --embed mode; CDN auto-loads |
| Chinese garbled | File saved in wrong encoding | Save as UTF-8; --embed embeds correct charset |
| CLI not found | Node.js not installed | Install from nodejs.org |
| Screenshot fails | Playwright not installed | npm install playwright && npx playwright install chromium, or use --svg-output for vector format |
Verification
After generating a chart:
- Open the .html file in a browser
- Confirm chart canvas/SVG renders
- Hover over data points โ tooltip should appear
- Resize browser โ chart should adapt
- Test with
--theme to confirm theme switching
Other Advanced Capabilities
1. Multi-Pattern Generation
The model can generate multiple chart configurations in a single response โ combining different chart types, color palettes, shapes, and styles all at once. For example, you can request a bar chart with 3 different themes, a word cloud with 5 shapes, or a side-by-side comparison of line vs bar for the same dataset โ all produced in one go.
Bar Chart with multiple styles and palettes:
Prompt: "Give me a bar chart of monthly sales/profit, with buttons to switch between 6 styles (default, rounded, horizontal, stacked, dark, gradient) and 8 color palettes (default, warm, cool, pastel, vivid, forest, sunset, ocean)"
Word Cloud with multiple shapes and palettes:
Prompt: "Make a word cloud of AI/ML terms, with buttons to switch between 6 shapes (circle, heart, diamond, star, pentagon, triangle) and 8 color palettes"
2. Full ECharts Series Support
This skill documents the 6 most common chart types (bar, line, pie, scatter, radar, wordcloud), but the underlying LLM can theoretically generate any ECharts series type. The following chart types are supported by ECharts and can be generated by the model, though they are not explicitly documented in this skill โ accuracy may be slightly lower for undocumented types, but modern LLMs handle them reliably:
Additional Series Types:
- Candlestick โ financial OHLC (Open-High-Low-Close) charts, also known as K-line charts
- Boxplot โ statistical distribution visualization with quartiles and outliers
- Heatmap โ matrix-based heatmap and calendar heatmap
- Treemap โ hierarchical data displayed as nested rectangles
- Sunburst โ multi-level radial hierarchy chart
- Sankey โ flow diagrams for energy, budget, traffic, etc.
- Funnel โ conversion funnel for marketing and sales analytics
- Gauge โ dashboard-style speedometer gauges
- Graph โ force-directed node-edge network graphs
- Tree โ tree diagrams (left-to-right, top-to-bottom, radial)
- PictorialBar โ bars rendered using SVG symbols or icons
- ThemeRiver โ streamgraph / ribbon-style time series
- Lines โ flight/migration path lines (typically used with maps)
- EffectScatter โ scatter plot with ripple animation effects
- Map โ geo-map charts with region shading
Additional Components & Extensions:
- Parallel โ parallel coordinates for multi-dimensional data
- Custom โ fully custom renderers via callback functions
- dataZoom โ interactive scrollable/zoomable axis (slider + inside)
- visualMap โ continuous or piecewise color mapping component
- brush โ rectangular/polygon region selection tool
- timeline โ animated time playback between chart states
- dataset โ declarative data transform pipeline (filter, sort, aggregate)
- markLine / markArea / markPoint โ annotation markers on series
- aria โ accessibility labels and descriptions
- 3D Charts โ via echarts-gl extension: scatter3D, bar3D, surface, globe, lines3D
