Chart Image

Generate publication-quality PNG chart images from data, supporting line, bar, area...

Install

npx skills add zebbern/claude-code-guide --skill chart-image -g -a claude-code -y

Press to copy:C Claude CodeX CodexU CursorA Ask your agent

Repository: zebbern/claude-code-guide4.7k
Category: Engineering
Updated: 4d ago
License: MIT
Context cost: Mediumabout 2,476 tokens
Runs scripts: Yes, review before use

What it does

Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts. Triggers when the user asks to visualize data, create a graph, plot a time series, or generate a chart for a report, alert, or dashboard. Runs as a lightweight, headless Node.js process without a browser.

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 "${CLAUDE_SKILL_DIR}/scripts" && npm install

Quick Usage

node "${CLAUDE_SKILL_DIR}/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

The examples below shorten the script path to chart.mjs.

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

# 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.png

Read the whole SKILL.md on GitHub