Skip to main content Accueil Créateurs johnalbertini14-glitch openclaw-skills chart-image
chart-image 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.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/johnalbertini14-glitch/openclaw-skills --skill chart-imageLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés SOC
Basé sur la classification professionnelle SOC
Explorateur de fichiers
7 fichiers name chart-image version 2.2.0 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. provides [{"capability":"chart-generation","methods":["lineChart","barChart","areaChart","pieChart","candlestickChart","heatmap"]}]
Chart Image Generator
Generate PNG chart images from data using Vega-Lite. Perfect for headless server environments.
Why This Skill?
Built for Fly.io / VPS / Docker deployments:
✅ No native compilation - Uses Sharp with prebuilt binaries (unlike canvas which requires build tools)
✅ No Puppeteer/browser - Pure Node.js, no Chrome download, no headless browser overhead
✅ Lightweight - ~15MB total dependencies vs 400MB+ for Puppeteer-based solutions
✅ Fast cold starts - No browser spinup delay, generates charts in <500ms
✅ Works offline - No external API calls (unlike QuickChart.io)
Setup (one-time)
cd /data/clawd/skills/chart-image/scripts && npm install
Quick Usage node /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.png
Chart Types
Line Chart (default) node chart.mjs --type line --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output line.png
Bar Chart node chart.mjs --type bar --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output bar.png
Area Chart node chart.mjs --type area --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output area.png
Pie / Donut Chart
node chart.mjs --type pie --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
--category-field category --y-field value --output pie.png
node chart.mjs --type donut --data '[{"category":"A","value":30},{"category":"B","value":70}]' \
--category-field category --y-field value --output donut.png
Candlestick Chart (OHLC) node 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.png
Heatmap node 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.png
Multi-Series Line Chart Compare 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.png
Stacked Bar Chart node 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.png
Volume Overlay (Dual Y-axis) Price 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.png
Sparkline (mini inline chart) node chart.mjs --sparkline --data '[{"x":"1","y":10},{"x":"2","y":15}]' --output spark.png
Sparklines are 80x20 by default, transparent, no axes.
Options Reference
Basic Options Option Description Default --typeChart type: line, bar, area, point, pie, donut, candlestick, heatmap line --dataJSON array of data points - --outputOutput file path chart.png --titleChart title - --widthWidth in pixels 600 --heightHeight in pixels 300
Axis Options Option Description Default --x-fieldField name for X axis x --y-fieldField name for Y axis y --x-titleX axis label field name --y-titleY axis label field name --x-typeX axis type: ordinal, temporal, quantitative ordinal --y-domainY scale as "min,max" auto
Visual Options Option Description Default --colorLine/bar color #e63946 --darkDark mode theme false --svgOutput SVG instead of PNG false --color-schemeVega color scheme (category10, viridis, etc.) -
Alert/Monitor Options Option Description Default --show-changeShow +/-% change annotation at last point false --focus-changeZoom Y-axis to 2x data range false --focus-recent NShow only last N data points all --show-valuesLabel min/max peak points false
Multi-Series/Stacked Options Option Description Default --series-fieldField for multi-series line charts - --stackedEnable stacked bar mode false --color-fieldField for stack/color categories -
Candlestick Options Option Description Default --open-fieldOHLC open field open --high-fieldOHLC high field high --low-fieldOHLC low field low --close-fieldOHLC close field close
Pie/Donut Options Option Description Default --category-fieldField for pie slice categories x --donutRender as donut (with center hole) false
Heatmap Options Option Description Default --color-value-fieldField for heatmap intensity value --y-category-fieldY axis category field y
Volume Overlay Options Option Description Default --volume-fieldField for volume bars (enables dual-axis) - --volume-colorColor for volume bars #4a5568
Formatting Options Option Description Default --y-formatY axis format: percent, dollar, compact, decimal4, integer, scientific, or d3-format string auto --subtitleSubtitle text below chart title - --hlineHorizontal reference line: "value" or "value,color" or "value,color,label" (repeatable) -
Annotation Options Option Description Default --annotationStatic text annotation - --annotationsJSON array of event markers -
Alert-Style Chart (recommended for monitors) node chart.mjs --type line --data '[...]' \
--title "Iran Strike Odds (48h)" \
--show-change --focus-change --show-values --dark \
--output alert.png
node chart.mjs --type line --data '[hourly data...]' \
--focus-recent 4 --show-change --focus-change --dark \
--output recent.png
Timeline Annotations Mark events on the chart:
node chart.mjs --type line --data '[...]' \
--annotations '[{"x":"14:00","label":"News broke"},{"x":"16:30","label":"Press conf"}]' \
--output annotated.png
Temporal X-Axis For proper time series with date gaps:
node chart.mjs --type line --x-type temporal \
--data '[{"x":"2026-01-01","y":10},{"x":"2026-01-15","y":20}]' \
--output temporal.png
Use --x-type temporal when X values are ISO dates and you want spacing to reflect actual time gaps (not evenly spaced).
Y-Axis Formatting Format axis values for readability:
node chart.mjs --data '[...]' --y-format dollar --output revenue.png
node chart.mjs --data '[...]' --y-format percent --output rates.png
node chart.mjs --data '[...]' --y-format compact --output users.png
node chart.mjs --data '[...]' --y-format decimal4 --output molt.png
node chart.mjs --data '[...]' --y-format ',.3f' --output custom.png
Available shortcuts: percent, dollar/usd, compact, integer, decimal2, decimal4, scientific
Chart Subtitle Add context below the title:
node chart.mjs --title "MOLT Price" --subtitle "20,668 MOLT held" --data '[...]' --output molt.png
Theme Selection Use --dark for dark mode. Auto-select based on time:
Night (20:00-07:00 local) : --darkDay (07:00-20:00 local) : light mode (default)
Piping Data echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node chart.mjs --output out.png
Custom Vega-Lite Spec node chart.mjs --spec my-spec.json --output custom.png
⚠️ IMPORTANT: Always Send the Image! After generating a chart, always send it back to the user's channel .
Don't just save to a file and describe it — the whole point is the visual.
node chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png
Save to /data/clawd/tmp/ (persistent) not /tmp/ (may get cleaned)
Use action=send with filePath — thread-reply does NOT support file attachments
Include a brief caption in the message text
Auto-use --dark between 20:00-07:00 Israel time
Updated: 2026-02-04 - Added --y-format (percent/dollar/compact/decimal4) and --subtitle
