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.

# 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 /data/clawd/skills/chart-image/scripts && npm install
```

## Quick Usage

```bash
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)
```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
```

### Candlestick Chart (OHLC)
```bash
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
```bash
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:
```bash
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
```bash
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:
```bash
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)
```bash
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 |
|--------|-------------|---------|
| `--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 |

### Axis Options
| 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 |
| `--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 |
| `--y-domain` | Y scale as "min,max" | auto |
| `--y-pad` | Add vertical padding as a fraction of range (e.g. `0.1` = 10%) | 0 |

### Visual Options
| Option | Description | Default |
|--------|-------------|---------|
| `--color` | Line/bar color | #e63946 |
| `--dark` | Dark mode theme | false |
| `--svg` | Output SVG instead of PNG | false |
| `--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.) | - |

### Alert/Monitor Options
| 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 |

### Multi-Series/Stacked Options
| Option | Description | Default |
|--------|-------------|---------|
| `--series-field` | Field for multi-series line charts | - |
| `--stacked` | Enable stacked bar mode | false |
| `--color-field` | Field for stack/color categories | - |

### Candlestick Options
| 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 |

### Pie/Donut Options
| Option | Description | Default |
|--------|-------------|---------|
| `--category-field` | Field for pie slice categories | x |
| `--donut` | Render as donut (with center hole) | false |

### Heatmap Options
| Option | Description | Default |
|--------|-------------|---------|
| `--color-value-field` | Field for heatmap intensity | value |
| `--y-category-field` | Y axis category field | y |

### Dual-Axis Options (General)
| Option | Description | Default |
|--------|-------------|---------|
| `--y2-field` | Second Y axis field (independent right axis) | - |
| `--y2-title` | Title for second Y axis | field name |
| `--y2-color` | Color for second series | #60a5fa (dark) / #2563eb (light) |
| `--y2-type` | Chart type for second axis: line, bar, area | line |
| `--y2-format` | Right-axis format: percent, dollar, compact, integer, decimal4, or d3-format string | auto |

**Example:** Revenue bars (left) + Churn area (right):
```bash
node chart.mjs \
  --data '[{"month":"Jan","revenue":12000,"churn":4.2},...]' \
  --x-field month --y-field revenue --type bar \
  --y2-field churn --y2-type area --y2-color "#60a5fa" --y2-format ".1f" \
  --y-title "Revenue ($)" --y2-title "Churn (%)" \
  --x-sort none --dark --title "Revenue vs Churn"
```

### Volume Overlay Options (Candlestick)
| Option | Description | Default |
|--------|-------------|---------|
| `--volume-field` | Field for volume bars (enables dual-axis) | - |
| `--volume-color` | Color for volume bars | #4a5568 |

### Formatting Options
| Option | Description | Default |
|--------|-------------|---------|
| `--y-format` | Y axis format: percent, dollar, compact, decimal4, integer, scientific, or d3-format string | auto |
| `--subtitle` | Subtitle text below chart title | - |
| `--hline` | Horizontal reference line: "value" or "value,color" or "value,color,label" (repeatable) | - |

### Annotation Options
| Option | Description | Default |
|--------|-------------|---------|
| `--annotation` | Static text annotation | - |
| `--annotations` | JSON array of