ClawHub

text2echart

Data & APIs

Chart generator skill. When triggered, CONSTRUCT ECharts option JSON from user data and OUTPUT the complete HTML string directly. Do NOT use CLI or scripts — output the HTML directly. The user saves it as .html and opens in browser. Supports 6 chart types: bar, line, pie, scatter, radar, wordcloud. Trigger words: chart, graph, visualize, plot, draw, 图表, 画图, 可视化.

Install

openclaw skills install text2echart

text2echart — Data to Chart

⚡ Instruction for LLM

When the user asks you to make a chart:

  1. Understand the data from the user's description
  2. Choose the right chart type (bar/line/pie/scatter/radar/wordcloud)
  3. Construct a complete ECharts option JSON
  4. OUTPUT the HTML directly — a single line of HTML string like the example below
  5. Tell the user to save it as .html and open in browser

DO NOT use CLI. DO NOT take screenshots. DO NOT describe the chart in words and ask the user to build it. Just output the HTML.

Example output format (minified, one line):
<!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
More in Data & APIs