chart-image_skill

Overview

This skill generates publication-quality chart images (PNG or SVG) from JSON data using Vega-Lite. It is optimized for headless server environments and small deployments (Fly.io, VPS, Docker) with no browser or native compilation required. Outputs include line, bar, area, pie/donut, candlestick, heatmap, multi-series and stacked charts suitable for reports, alerts, and dashboards.

How this skill works

You provide data as a JSON array and command-line options to define chart type, fields, size, formatting and annotations. The tool builds a Vega-Lite spec and renders a raster or vector image via a pure Node.js pipeline (Sharp + prebuilt binaries), avoiding Puppeteer or native build steps. It supports piping input, custom specs, dual Y-axes, sparklines, and export paths for automatic delivery.

When to use it

• Generate chart images for reports, emails, or monitoring alerts without a browser.
• Create time-series visualizations that respect real date gaps using temporal X axes.
• Produce compact sparklines or large publication charts on headless servers.
• Render multi-series, stacked, or candlestick charts for comparative or financial data.
• Embed formatted charts in automation pipelines where no external API or browser is allowed.

Best practices

• Pass data as a JSON array (or pipe it) and explicitly set x/y field names to avoid guesswork.
• Use --x-type temporal when X values are ISO dates to preserve actual time spacing.
• Save outputs to /data/clawd/tmp/ for persistence and send the generated file to users.
• Enable --dark for night-time charts (or auto-select based on local time) when distributing to dark-mode audiences.
• Use --y-format (percent, dollar, compact, decimal4) for readable axis labels in reports.

Example use cases

• Automated alert charts: use --show-change, --focus-change and --dark to generate monitor-ready images.
• Daily report generation: produce PNG revenue charts with --y-format dollar and subtitle context.
• Financial dashboards: create candlestick charts with OHLC fields and a volume overlay.
• Heatmaps for activity analysis: render weekly activity with --color-scheme viridis.
• Sparklines for compact status panels: generate 80x20 transparent charts for inline display.