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#

html

<!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#

ScenarioUse 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#

bash

# Web App — open interactive GUI
open text2echarts.html

# CLI — CSV → chart
node cli.js data.csv --open

# CLI — JSON → SVG
node cli.js chart.json -o report.html

Supported Inputs#

FormatExampleAuto-detectedCSVMonth,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}]}✅ yesStdin pipecat data.csv | node cli.js -✅ use -

CLI Reference#

bash

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#

TypeCSV columnsAuto featuresbarcol1=labels, col2+=valuesRounded corners, top labelslinecol1=labels, col2+=valuesSmooth curves, area fillpiecol1=name, col2=valueDonut chart, % labelsscattercol1=x, col2=yBubble symbolsradarcol1=dimension, col2+=valuesPolygon shapewordcloudcol1=word, col2=frequencyDiamond shape

Themes#

ThemeStyleBackgrounddarkTech, deep blue#1a1a2einfographicClean report#f5f5f5macaronsSoft, business#f5f5f5vintageNostalgic#f5f5f5shineBright, vivid#f5f5f5romaProfessional#f5f5f5

Few-Shot Examples#

1. CSV → Bar Chart#

User: "Chart these monthly sales"

csv

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#

json

{
  "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#

csv

Date,Revenue,Cost
Jan,1200,800
Feb,1500,900
Mar,1800,1100

node cli.js data.csv --type line --theme dark --open

Architecture#

text

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#

FileContentprompt.mdPrompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user templatereferences/echarts-option-reference.mdFull ECharts option API (EN, from official site)references/echarts-option-zh.mdFull ECharts option API (中文)references/echarts-wordcloud.mdWordcloud extension docsreferences/echarts-zh-title.mdtitle 选项详细说明references/echarts-zh-grid.mdgrid 选项详细说明references/echarts-zh-xAxis.mdxAxis 选项详细说明references/echarts-zh-yAxis.mdyAxis 选项详细说明references/echarts-zh-series-bar.mdseries.bar 柱状图配置references/echarts-zh-series-line.mdseries.line 折线图配置references/echarts-zh-series-pie.mdseries.pie 饼图配置references/echarts-zh-series-scatter.mdseries.scatter 散点图references/echarts-zh-series-radar.mdseries.radar 雷达图references/echarts-zh-tooltip.mdtooltip 提示框配置references/echarts-zh-legend.mdlegend 图例配置references/echarts-zh-color.mdcolor 调色盘references/echarts-zh-label.mdlabel 数据标签references/echarts-zh-emphasis.mdemphasis 高亮状态references/echarts-zh-smooth.mdsmooth 平滑曲线references/echarts-zh-axisLabel.mdaxisLabel 坐标轴标签

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.

text

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:

OptionWhat it doesConcrete exampleLinktitleChart title{"text":"Sales","left":"center","textStyle":{"fontSize":18}}→ docsgridChart margins{"left":"3%","right":"4%","bottom":"10%","containLabel":true} — containLabel prevents axis labels from being clipped→ docsxAxisX axis{"type":"category","data":["Jan","Feb"],"axisLabel":{"rotate":45}} — type must be category or value→ docsyAxisY axis{"type":"value","name":"Units"} — add name for axis label text→ docsseries.type:'bar'Bar chart{"type":"bar","data":[30,80],"itemStyle":{"borderRadius":[4,4,0,0]},"label":{"show":true,"position":"top"}}→ docsseries.type:'line'Line chart{"type":"line","data":[22,25,23],"smooth":true,"areaStyle":{"opacity":0.1},"lineStyle":{"width":3,"shadowBlur":10}}→ docsseries.type:'pie'Pie/donut`{"type":"pie","radius":["40%","70%"],"data":[{"value":48,"name":"A"}],"label":{"formatter":"{b}{d}%"},"emphasis":{"label":{"fontSize":16}}}`→ docsseries.type:'scatter'Scatter{"type":"scatter","data":[[160,55],[170,65]],"symbolSize":12}→ docsseries.type:'radar'Radar{"type":"radar","data":[{"value":[90,75],"name":"Score"}]} + radar.indicator→ docstooltipHover info{"trigger":"axis"} for bar/line (axis-level), {"trigger":"item","formatter":"{b}:{c}"} for pie→ docslegendSeries names{"data":["Sales","Profit"],"bottom":"0"} — data must match series name→ docscolorColor palette["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"] — ECharts default 5-color palette→ docslabelData labels{"show":true,"position":"top","formatter":"{c}","fontSize":14} — position: top/inside/outside/bottom→ docsemphasisHighlight state{"label":{"fontSize":16,"fontWeight":"bold"}} — triggered on hover→ docssmoothCurve linestrue for curved line chart, false (default) for polyline→ docsitemStyle.borderRadiusRounded bars[4,4,0,0] — top-left, top-right, bottom-right, bottom-left→ docsaxisLabel.rotateRotate X labels45 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#

ProblemCauseFixBlank chartCDN blocked or no internetUse --embed flag for local libs (~1MB)SVG not renderingOld browser versionChrome/Firefox 2020+ requiredWordcloud missingMissing wordcloud extensionIncluded in --embed mode; CDN auto-loadsChinese garbledFile saved in wrong encodingSave as UTF-8; --embed embeds correct charsetCLI not foundNode.js not installedInstall from nodejs.orgScreenshot failsPlaywright not installednpm install playwright && npx playwright install chromium, or use --svg-output for vector format

Verification#

After generating a chart:

1. Open the .html file in a browser
2. Confirm chart canvas/SVG renders
3. Hover over data points — tooltip should appear
4. Resize browser — chart should adapt
5. 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