ClawHub

text2echart

Other

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 --embed output. - Screenshot (截图): use CLI with --screenshot output. - Fine-tuning (微调/修改): open browser for interactive adjustment. Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud. Trigger words: chart, graph, visualize, plot, draw, wordcloud, vent draw图表, 画图, 可视化, 图片, 矢量图, html, web, 源码, 页面, 词云.

Install

openclaw skills install text2echart

text2echart — Data to Chart

⚡ 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

case when: user asks for an image / picture / vector graphic (图片/矢量图):

  • Use CLI with SVG + embed: node cli.js data.json --svg --embed --svg-output -o chart.svg
  • --svg enables SVG renderer, --embed bundles ECharts lib for offline, --svg-output extracts standalone .svg file
  • SVG is vector format — sharp at any resolution, ideal for documents
  • Also send PNG screenshot for instant preview

case when: user asks for html / web / source / page (html/web/源码/页面):

  • Generate HTML with CLI: node cli.js data.json --svg -o chart.html
  • Read the generated HTML file and output as code block: ```html ... ```
  • User can copy-paste and save as .html to open in browser

case when: user asks for a screenshot / snapshot (截图):

  • Use CLI with screenshot output: node cli.js data.json --screenshot chart.png
  • This generates high-quality raster PNG via Playwright

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
  • 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 web/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 web/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 web/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

# Web App — open interactive GUI
open web/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-detected
CSVMonth,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 pipecat 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
  --theme <name>     dark|infographic|macarons|roma|shine|vintage
  --width / --height Chart dimensions
  --svg              SVG renderer (default)
  --open             Open in browser after generation
  --embed            Embed ECharts lib for offline (~1MB)
  --slide            960x540 PPT slide mode

Chart Types

TypeCSV columnsAuto features
barcol1=labels, col2+=valuesRounded corners, top labels
linecol1=labels, col2+=valuesSmooth curves, area fill
piecol1=name, col2=valueDonut chart, % labels
scattercol1=x, col2=yBubble symbols
radarcol1=dimension, col2+=valuesPolygon shape
wordcloudcol1=word, col2=frequencyDiamond shape

Themes

ThemeStyleBackground
darkTech, deep blue#1a1a2e
infographicClean report#f5f5f5
macaronsSoft, business#f5f5f5
vintageNostalgic#f5f5f5
shineBright, vivid#f5f5f5
romaProfessional#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 (~800 bytes)
  → --embed flag: inline ECharts lib (~1MB, offline)

Dependencies

  • CLI: Node.js only (stdlib, no npm packages)
  • Runtime: Internet for ECharts CDN (or --embed for offline)
  • Zero npm install required

References

FileContent
prompt.mdPrompt engineering guide: core pattern, chain-of-thought, 3 few-shot examples, 16 option references, end-user template
references/echarts-option-reference.mdFull ECharts option API (EN, from official site)
references/echarts-option-zh.mdFull ECharts option API (中文)
references/echarts-wordcloud.mdWordcloud extension docs
references/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 web/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:

OptionWhat it doesConcrete exampleLink
titleChart title{"text":"Sales","left":"center","textStyle":{"fontSize":18}}→ docs
gridChart margins{"left":"3%","right":"4%","bottom":"10%","containLabel":true} — containLabel prevents axis labels from being clipped→ docs
xAxisX axis{"type":"category","data":["Jan","Feb"],"axisLabel":{"rotate":45}} — type must be category or value→ docs
yAxisY 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
tooltipHover info{"trigger":"axis"} for bar/line (axis-level), {"trigger":"item","formatter":"{b}:{c}"} for pie→ docs
legendSeries names{"data":["Sales","Profit"],"bottom":"0"} — data must match series name→ docs
colorColor palette["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"] — ECharts default 5-color palette→ docs
labelData labels{"show":true,"position":"top","formatter":"{c}","fontSize":14} — position: top/inside/outside/bottom→ docs
emphasisHighlight state{"label":{"fontSize":16,"fontWeight":"bold"}} — triggered on hover→ docs
smoothCurve linestrue for curved line chart, false (default) for polyline→ docs
itemStyle.borderRadiusRounded bars[4,4,0,0] — top-left, top-right, bottom-right, bottom-left→ docs
axisLabel.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

ProblemCauseFix
Blank chartCDN blocked or no internetUse --embed flag for local libs
SVG not renderingOld browser versionChrome/Firefox 2020+ required
Wordcloud missingMissing wordcloud extensionIncluded in --embed mode; CDN auto-loads
Chinese garbledFile saved in wrong encodingSave as UTF-8; --embed embeds correct charset
CLI not foundNode.js not installedInstall from nodejs.org

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