Skip to main content
Category: Visual & Media · Version: 2.0.0 · Author: OpenDirectory · Compatibility: All targets (claude, codex, opencode, gemini, anti-gravity, openclaw, hermes)
Generate publication-quality data visualization charts as PNG using Chart.js v4. 8 chart types, 5 style presets, annotation highlights.

​
Install

​
What it does

  • Takes chart type + data (JSON or CSV) as input
  • Generates a self-contained HTML file with Chart.js v4
  • Screenshots via headless Chromium at 2× deviceScaleFactor (retina quality)
  • Outputs a crisp PNG ready for decks, reports, social, or email
  • Supports annotation highlights on a specific data point
  • No Python, no API key, no external service

​
Example

“Create a line chart. Title: ‘From 12kto12k to 95k ARR in 12 Months’. Data: [12, 18, 22, 25, 31, 38, 44, 52, 61, 68, 78, 95] (Jan–Dec 2024, in thousands). Highlight December in gold. Source: Internal CRM. Style: electric-burst. Dimensions: 1080x1080.”
Output: chart.png — dark canvas, electric yellow December highlight with callout, growth title.

​
Supported Chart Types

​
Supported Styles

​
Parameters

​
Output

Default output: 1080×1080 viewport → 2160×2160 PNG (@2× deviceScaleFactor).

​
Dependencies

Node.js — required. Install from nodejs.org or brew install node. Bundled inside this skill:
  • scripts/export-chart.sh — orchestrator script
  • scripts/screenshot-chart.mjs — Playwright capture script
Auto-installed on first run via npm:
  • playwright — headless Chromium for screenshot
  • Chromium browser binary (~200MB, downloaded once and cached)
No API keys required.