Generate publication-quality chart images from data. Supports line, bar, area, point, histogram, candlestick, pie/donut, heatmap, multi-series, and stacked c...
数据来源：ClawHub。 在 ClawSkills 查看
选择你使用的 Agent
方法一：命令行安装（推荐）
推荐（无需提前安装 clawhub）
npx clawhub@latest --dir ~/.claude/skills install chart-image或使用 clawhub CLI（需提前安装）
clawhub --dir ~/.claude/skills install chart-image⚠️ 需要 Node.js 18+，没有 Node？请使用下方方法二直接下载 ZIP。 安装 Node.js →
方法二：手动下载安装（无需 Node）
下载 ZIP，解压后将文件夹放到以下路径，重启 Agent 即可：
安装路径
~/.claude/skills/chart-image/💡解压后将文件夹放到上方路径，重启 Agent 即可生效
--- name: chart-image description: Generate publication-quality chart images from data. Supports line, bar, area, point, candlestick, pie/donut, heatmap, multi-series, and stacked charts. Use when visualizing data, creating graphs, plotting time series, or generating chart images for reports/alerts. Designed for Fly.io/VPS deployments - no native compilation, no Puppeteer, no browser required. Pure Node.js with prebuilt binaries. ---
Generate PNG chart images from data using Vega-Lite. Perfect for headless server environments.
Built for Fly.io / VPS / Docker deployments:
canvas which requires build tools)cd /data/clawd/skills/chart-image/scripts && npm installnode /data/clawd/skills/chart-image/scripts/chart.mjs \
--type line \
--data '[{"x":"10:00","y":25},{"x":"10:30","y":27},{"x":"11:00","y":31}]' \
--title "Price Over Time" \
--output chart.pngnode chart.mjs --type line --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output line.pngnode chart.mjs --type bar --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output bar.pngnode chart.mjs --type area --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output area.png# Pie
node chart.mjs --type pie --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
--category-field category --y-field value --output pie.png
# Donut (with hole)
node chart.mjs --type donut --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
--category-field category --y-field value --output donut.pngnode chart.mjs --type candlestick \
--data '[{"x":"Mon","open":100,"high":110,"low":95,"close":105}]' \
--open-field open --high-field high --low-field low --close-field close \
--title "Stock Price" --output candle.pngnode chart.mjs --type heatmap \
--data '[{"x":"Mon","y":"Week1","value":5},{"x":"Tue","y":"Week1","value":8}]' \
--color-value-field value --color-scheme viridis \
--title "Activity Heatmap" --output heatmap.pngCompare multiple trends on one chart:
node chart.mjs --type line --series-field "market" \
--data '[{"x":"Jan","y":10,"market":"A"},{"x":"Jan","y":15,"market":"B"}]' \
--title "Comparison" --output multi.pngnode chart.mjs --type bar --stacked --color-field "category" \
--data '[{"x":"Mon","y":10,"category":"Work"},{"x":"Mon","y":5,"category":"Personal"}]' \
--title "Hours by Category" --output stacked.pngPrice line with volume bars:
node chart.mjs --type line --volume-field volume \
--data '[{"x":"10:00","y":100,"volume":5000},{"x":"11:00","y":105,"volume":3000}]' \
--title "Price + Volume" --output volume.pngnode chart.mjs --sparkline --data '[{"x":"1","y":10},{"x":"2","y":15}]' --output spark.pngSparklines are 80x20 by default, transparent, no axes.
| Option | Description | Default | |--------|-------------|---------| | --type | Chart type: line, bar, area, point, pie, donut, candlestick, heatmap | line | | --data | JSON array of data points | - | | --output | Output file path | chart.png | | --title | Chart title | - | | --width | Width in pixels | 600 | | --height | Height in pixels | 300 |
| Option | Description | Default | |--------|-------------|---------| | --x-field | Field name for X axis | x | | --y-field | Field name for Y axis | y | | --x-title | X axis label | field name | | --y-title | Y axis label | field name | | --x-type | X axis type: ordinal, temporal, quantitative | ordinal | | --x-format | Temporal X axis label format (d3-time-format, e.g. %b %d, %H:%M) | auto | | --x-sort | X axis order: ascending, descending, or none (preserve input order) | auto | | --series-order CSV | Explicit series/category order for multi-series and stacked legends (e.g. Critical,High,Medium) | data order | | --x-label-limit PX | Max pixel width for X axis labels before Vega truncates them | auto | | --y-label-limit PX | Max pixel width for Y axis labels before Vega truncates them | auto | | --x-ticks N | Target X-axis tick count for dense or sparse charts | auto | | --y-ticks N | Target primary/left Y-axis tick count for dense or sparse charts | auto | | --y2-ticks N | Target secondary/right Y-axis tick count for dual-axis and volume charts | auto | | --y-domain | Y scale as "min,max" | auto | | --y-pad | Add vertical padding as a fraction of range (e.g. 0.1 = 10%) | 0 |
| Option | Description | Default | |--------|-------------|---------| | --color | Line/bar color | #e63946 | | --dark | Dark mode theme | false | | --svg | Output SVG instead of PNG | false | | --font-family | CSS font-family string for chart text/legend/title theming | Helvetica, Arial, sans-serif |
Font examples: "Inter, Helvetica, Arial, sans-serif", "Georgia, serif", "JetBrains Mono, Consolas, monospace" | --no-points | Hide point markers on line charts | false | | --line-width N | Set line thickness in pixels for line charts | 2 | | --point-size N | Set point marker size for line/point charts | 60 | | --bar-radius N | Round bar corners in pixels for bar-based charts | 0 | | --color-scheme | Vega color scheme (category10, viridis, etc.) | - | | --legend-columns N | Wrap legend entries into N columns for crowded multi-series/pie charts | auto | | --legend-label-limit PX | Max pixel width for legend labels before Vega truncates them | auto |
| Option | Description | Default | |--------|-------------|---------| | --show-change | Show +/-% change annotation at last point | false | | --focus-change | Zoom Y-axis to 2x data range | false | | --focus-recent N | Show only last N data points | all | | --show-values | Label min/max peak points | false | | --last-value | Label the final data point value | false |
| Option | Description | Default | |--------|-------------|---------| | --series-field | Field for multi-series line charts | - | | --stacked | Enable stacked bar mode | false | | --color-field | Field for stack/color categories | - |
| Option | Description | Default | |--------|-------------|---------| | --open-field | OHLC open field | open | | --high-field | OHLC high field | high | | --low-field | OHLC low field | low | | --close-field | OHLC close field | close |
| Option | Description | Default | |--------|-------------|---------| | --category-field | Field for pie slice categories | x | | --donut | Render as donut (with center hole) | false |
| Option | Description | Default | |--------|-------------|---------| | --color-value-field | Field for heatmap intensity | value | | --y-category-field | Y axis category field | y |
...
安装 Chart Image 后，可以对 AI 说这些话来触发它
Help me get started with Chart Image
Explains what Chart Image does, walks through the setup, and runs a quick demo based on your current project
Use Chart Image to generate publication-quality chart images from data
Invokes Chart Image with the right parameters and returns the result directly in the conversation
What can I do with Chart Image in my data & analytics workflow?
Lists the top use cases for Chart Image, with example commands for each scenario
将技能文件夹放到 ~/.claude/skills/chart-image/ 目录（个人级，所有项目可用），或 .claude/skills/chart-image/（项目级）。重启 AI 客户端后，用 /chart-image 主动调用，或让 AI 根据上下文自动发现并使用。
Chart Image 支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。
Chart Image 可免费安装使用。请查阅仓库了解许可证信息。
Generate publication-quality chart images from data. Supports line, bar, area, point, histogram, candlestick, pie/donut, heatmap, multi-series, and stacked c...
Chart Image 属于「Data & Analytics」分类，该分类的技能帮助 AI 智能体在此领域执行专业任务。
Automate my data & analytics tasks using Chart Image
Identifies repetitive steps in your workflow and sets up Chart Image to handle them automatically