{
    "name": "chart-image",
    "version": "1.0.0",
    "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.",
    "system_prompt": "name chart-image version 2.5.1 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. provides [{\"capability\":\"chart-generation\",\"methods\":[\"lineChart\",\"barChart\",\"areaChart\",\"pieChart\",\"candlestickChart\",\"heatmap\"]}] 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 /data/clawd/skills/chart-image/scripts && npm install Quick Usage 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) 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 Candlestick Chart (OHLC) 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 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: 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 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: 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) 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 --y-domain Y scale as \"min,max\" auto Visual Options Option Description Default --color Line/bar color #e63946 --dark Dark mode theme false --svg Output SVG instead of PNG false --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 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 Example: Revenue bars (left) + Churn area (right): 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\" \\ --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 |",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "trigger_words": [],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=zebbern-claude-code-guide-skills-chart-image-skill-md"
}