Agent skill · design visual · sundial-org
chart-image
Generate publication-quality chart images from data. Supports line, bar, area, and point 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.
Why this skill is useful
Adds specific chart generation capabilities using Vega-Lite that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. About 3k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
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) Alternatives and why they don't work well on Fly: canvas npm - Requires native compilation, fails on minimal Docker images Puppeteer + Chart.js - 400MB+ Chrome download, slow cold starts, memory heavy QuickChart API - External dependency, rate limits, privacy concerns Plotly - Needs Puppeteer for static image export Setup (one-time) Quick Usage Alert-Style Chart (recommended for monitors) Options Option Description Default -------- ------------- --------- --type Chart type: line, bar, area, point line --data JSON array of data points - --spec Path to full Vega-Lite spec file - --output Output PNG path chart.png --title Chart title - --width Width in pixels 600 --height Height in pixels 300 --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 --color Line/bar color #e63946 --y-domain Y scale as "min,max" auto --show-change Show +/-% change annotation 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 --dark Dark mode theme false --svg Output SVG instead of PNG false --sparkline Tiny inline chart (80x20, no axes) false --stacked Stacked bar chart (requires --color-field) false --color-field Field name for stack categories - --series-field Field for multi-series line charts - Multi-Series Line Charts Compare multi …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/chart-image