# Chart Image

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

- Repository: https://github.com/zebbern/claude-code-guide (4691 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add zebbern/claude-code-guide --skill chart-image -g -a claude-code -y`
Codex: `npx skills add zebbern/claude-code-guide --skill chart-image -g -a codex -y`
Cursor: `npx skills add zebbern/claude-code-guide --skill chart-image -g -a cursor -y`
Gemini CLI: `npx skills add zebbern/claude-code-guide --skill chart-image -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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)

```bash
cd "${CLAUDE_SKILL_DIR}/scripts" && npm install
```

## Quick Usage

```bash
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)
```bash
node chart.mjs --type line --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output line.png
```

### Bar Chart
```bash
node chart.mjs --type bar --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output bar.png
```

### Area Chart
```bash
node chart.mjs --type area --data '[{"x":"A","y":10},{"x":"B","y":15}]' --output area.png
```

### Pie / Donut Chart
```bash
# 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
```

The rest: https://github.com/zebbern/claude-code-guide/blob/HEAD/skills/chart-image/SKILL.md