Chart Image by zebbern — AI Skill for Any LLM

Q: What does the Chart Image AI skill do?

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.

Q: Why use Chart Image on TypingMind?

Because you install it once and use it with any model. Chart Image is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

Q: How do I install Chart Image in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Q: Which AI models can use Chart Image?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

Q: How many AI models can I use with Chart Image?

As many as you like. As long as a model supports skills, you can use Chart Image with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Q: Is the Chart Image AI skill free?

Yes. It is published on GitHub by zebbern under the MIT license. You only pay your own AI provider for the tokens you use.

Q: What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

Q: How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Overview

Publisher	zebbern
Repository	`claude-code-guide`
Skill name	`chart-image`
Stars	4.6K
Forks	464
Bundled files	4
License	MIT
Links	Skill source Repository

Markdown instructions

A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

Works with any LLM

AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

4 bundled files

Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

Open source

Published by zebbern on GitHub. Read the source before you install it.

Installation

Install the Chart Image AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/zebbern/claude-code-guide.git /tmp/claude-code-guide
mkdir -p .claude/skills
cp -r /tmp/claude-code-guide/skills/chart-image .claude/skills/chart-image

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Chart Image in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Chart Image on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Chart Image is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed

The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

Switch models mid-chat

Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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

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" \
  --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 event markers	-

Alert-Style Chart (recommended for monitors)

bash
node chart.mjs --type line --data '[...]' \
  --title "Iran Strike Odds (48h)" \
  --show-change --focus-change --show-values --dark \
  --output alert.png

For recent action only:

bash
node chart.mjs --type line --data '[hourly data...]' \
  --focus-recent 4 --show-change --focus-change --dark \
  --output recent.png

Timeline Annotations

Mark events on the chart:

bash
node chart.mjs --type line --data '[...]' \
  --annotations '[{"x":"14:00","label":"News broke"},{"x":"16:30","label":"Press conf"}]' \
  --output annotated.png

Temporal X-Axis

For proper time series with date gaps:

bash
node chart.mjs --type line --x-type temporal \
  --data '[{"x":"2026-01-01","y":10},{"x":"2026-01-15","y":20}]' \
  --output temporal.png

Use --x-type temporal when X values are ISO dates and you want spacing to reflect actual time gaps (not evenly spaced).

Y-Axis Formatting

Format axis values for readability:

bash
# Dollar amounts
node chart.mjs --data '[...]' --y-format dollar --output revenue.png
# → $1,234.56

# Percentages (values as decimals 0-1)
node chart.mjs --data '[...]' --y-format percent --output rates.png
# → 45.2%

# Compact large numbers
node chart.mjs --data '[...]' --y-format compact --output users.png
# → 1.2K, 3.4M

# Crypto prices (4 decimal places)
node chart.mjs --data '[...]' --y-format decimal4 --output molt.png
# → 0.0004

# Custom d3-format string
node chart.mjs --data '[...]' --y-format ',.3f' --output custom.png

Available shortcuts: percent, dollar/usd, compact, integer, decimal2, decimal4, scientific

Chart Subtitle

Add context below the title:

bash
node chart.mjs --title "MOLT Price" --subtitle "20,668 MOLT held" --data '[...]' --output molt.png

Theme Selection

Use --dark for dark mode. Auto-select based on time:

Night (20:00-07:00 local): --dark
Day (07:00-20:00 local): light mode (default)

Piping Data

bash
echo '[{"x":"A","y":1},{"x":"B","y":2}]' | node chart.mjs --output out.png

Custom Vega-Lite Spec

For advanced charts:

bash
node chart.mjs --spec my-spec.json --output custom.png

⚠️ IMPORTANT: Always Send the Image!

After generating a chart, always send it back to the user's channel. Don't just save to a file and describe it — the whole point is the visual.

bash
# 1. Generate the chart
node chart.mjs --type line --data '...' --output /data/clawd/tmp/my-chart.png

# 2. Send it! Use message tool with filePath:
#    action=send, target=<channel_id>, filePath=/data/clawd/tmp/my-chart.png

Tips:

Save to /data/clawd/tmp/ (persistent) not /tmp/ (may get cleaned)
Use action=send with filePath — thread-reply does NOT support file attachments
Include a brief caption in the message text
Auto-use --dark between 20:00-07:00 Israel time

Updated: 2026-02-04 - Added --y-format (percent/dollar/compact/decimal4) and --subtitle

Frequently asked questions

What does the Chart Image AI skill do?

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.

Why use Chart Image on TypingMind?

Because you install it once and use it with any model. Chart Image is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Chart Image in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Chart Image?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Chart Image?

As many as you like. As long as a model supports skills, you can use Chart Image with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Chart Image AI skill free?

Yes. It is published on GitHub by zebbern under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Chart Image Generator

Why This Skill?

Setup (one-time)

Quick Usage

Chart Types

Line Chart (default)

Bar Chart

Area Chart

Pie / Donut Chart

Candlestick Chart (OHLC)

Heatmap

Multi-Series Line Chart

Stacked Bar Chart

Volume Overlay (Dual Y-axis)

Sparkline (mini inline chart)

Options Reference

Basic Options

Axis Options

Visual Options

Alert/Monitor Options

Multi-Series/Stacked Options

Candlestick Options

Pie/Donut Options

Heatmap Options

Dual-Axis Options (General)

Volume Overlay Options (Candlestick)

Formatting Options

Annotation Options

Alert-Style Chart (recommended for monitors)

Timeline Annotations

Temporal X-Axis

Y-Axis Formatting

Chart Subtitle

Theme Selection

Piping Data

Custom Vega-Lite Spec

⚠️ IMPORTANT: Always Send the Image!

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now