Agent skill

Chart Image

Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.

MITAuto-check passedData & Analytics

Install Chart Image

skills CLI

$ npx skills add zebbern/claude-code-guide --skill chart-image -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install zebbern/claude-code-guide chart-image --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/chart-image .claude/skills/chart-image && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "chart-image" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image into .claude/skills/chart-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-image", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add zebbern/claude-code-guide --skill chart-image -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install zebbern/claude-code-guide chart-image --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/chart-image .agents/skills/chart-image && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "chart-image" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image into .agents/skills/chart-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-image", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add zebbern/claude-code-guide --skill chart-image -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install zebbern/claude-code-guide chart-image --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/chart-image .cursor/skills/chart-image && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "chart-image" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image into .cursor/skills/chart-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-image", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/zebbern/claude-code-guide.git --path skills/chart-image

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add zebbern/claude-code-guide --skill chart-image -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install zebbern/claude-code-guide chart-image --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/chart-image .gemini/skills/chart-image && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "chart-image" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image into .gemini/skills/chart-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-image", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install zebbern/claude-code-guide chart-image

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add zebbern/claude-code-guide --skill chart-image -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/chart-image .github/skills/chart-image && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "chart-image" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image into .github/skills/chart-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-image", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add zebbern/claude-code-guide --skill chart-image -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install zebbern/claude-code-guide chart-image --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zebbern/claude-code-guide.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/chart-image .opencode/skills/chart-image && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "chart-image" agent skill from https://github.com/zebbern/claude-code-guide/tree/main/skills/chart-image into .opencode/skills/chart-image/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-image", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: chart-image
GitHub stars: 4.6k
Token cost: ~2.7k tokens
SKILL.md length: 656 words
Files: 6 (incl. scripts)
Skills in repo: 46
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.

The user asks to visualize data
SKILL.md covers Why This Skill?, Setup (one-time), Quick Usage and Chart Types, plus 3 more sections
Runs JavaScript scripts from its folder; calls node and npm
Plot a time series

What it does

Chart Image is an agent skill from zebbern/claude-code-guide. 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.

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts (for example `CAPABILITY.md`, `README.md` and `_meta.json`).

It sits in Data & Analytics, covering Data visualization and Forecasting and time series. It works with Node.js. The repository describes itself as: Claude Code Guide - Setup, Commands, workflows, agents, skills & tips-n-tricks from beginner to power user! The licence is MIT.

When your agent uses it

The user asks to visualize data
Plot a time series
Generate a chart for a report

Example prompts

“/chart-image”

Requirements

Node.js
Docker

What it can do on your machine

Read from SKILL.md and the folder at commit 4698e3b. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 2 files in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
- node
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chart Image loads about 2.7k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 656 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~85
When it runs · the whole SKILL.md, loaded when a task matches: ~2.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from zebbern/claude-code-guide at commit 4698e3b, republished under its MIT licence (© zebbern). 656 words, ~2,651 tokens.

Download SKILL.mdSave it as .claude/skills/chart-image/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.

name: chart-image
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.
version: 2.5.1

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"

Show full SKILL.md (241 more words)Show less

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

Files

SKILL.md and 5 other files (scripts) in skills/chart-image of zebbern/claude-code-guide.

SKILL.md
CAPABILITY.md
README.md
_meta.json
scripts/chart.mjs
scripts/package.json

Open the folder on GitHubat commit 4698e3b

Compare with similar skills

Chart Image next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chart Image compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Chart Image this skillzebbern/claude-code-guide	4.6k	—	~2.7k	Automated safety check: Pass	MIT	today
Chart Visualizationbytedance/deer-flow	83k	2 repos	~840	Automated safety check: Pass	MIT	today
Tuftearef-vc/tufte-claude-skill	306	—	~1.3k	Automated safety check: Pass	MIT	3 mo ago
Advanced Data VisualizationHack23/cia	239	—	~1.5k	Automated safety check: Pass	Apache-2.0	today
Scientific Toolkit SkillzLanqing/codex-claude-academic-skills	4.6k	—	~1.2k	Automated safety check: Pass	MIT	4 mo ago
Chem Nmr Analysislearningmatter-mit/AtomisticSkills	175	—	~2.3k	Automated safety check: Pass	MIT	today

Similar skills

Chart Visualization
bytedance/deer-flow
Picks a suitable chart type from 26 options for your data, maps the data to that chart's parameters and generates a chart image through a JavaScript script.
83k GitHub starsUsed in 2 repos~840 tokens
Data & AnalyticsAuto-check passed
Tufte
aref-vc/tufte-claude-skill
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
306 GitHub stars~1.3k tokensUpdated 3 mo ago
Data & AnalyticsAuto-check passed
Advanced Data Visualization
Hack23/cia
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
239 GitHub stars~1.5k tokensUpdated today
Data & AnalyticsAuto-check passed
Scientific Toolkit Skill
zLanqing/codex-claude-academic-skills
Research computing toolkit for optoelectronic information science and engineering, MATLAB/Octave, Python scientific analysis, signal processing, image processing, statistics, simulation…
4.6k GitHub stars~1.2k tokensUpdated 4 mo ago
Data & AnalyticsAuto-check passed
Chem Nmr Analysis
learningmatter-mit/AtomisticSkills
Scripts for Wasserstein deconvolution of 1H NMR mixture spectra against reference spectra, reaction product prediction, time-series kinetics, and spectral plotting.
175 GitHub stars~2.3k tokensUpdated today
Data & AnalyticsAuto-check passed
Chart Image
sundial-org/awesome-openclaw-skills
Generate publication-quality chart images from data. An agent skill from sundial-org/awesome-openclaw-skills.
663 GitHub stars~1.3k tokensUpdated 7 mo ago
Data & AnalyticsAuto-check passed

More from zebbern/claude-code-guide

All 46 skills in this repo

Localization Toolkit
zebbern/claude-code-guide
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the…
4.6k GitHub starsUsed in 1 repo~1.3k tokens
Auto-check passed
Audit Flow
zebbern/claude-code-guide
Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export.
4.6k GitHub stars~4.2k tokensUpdated today
Auto-check passed
Code To Diagram
zebbern/claude-code-guide
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts.
4.6k GitHub stars~972 tokensUpdated today
Auto-check passed
Code Vuln Audit
zebbern/claude-code-guide
Scan code for security issues: dependency vulnerabilities (npm/pip audit), secret leaks (regex and entropy analysis), and OWASP anti-patterns like SQL injection, XSS, or command injection.
4.6k GitHub stars~1.3k tokensUpdated today
Auto-check passed
Data Viz Renderer
zebbern/claude-code-guide
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards.
4.6k GitHub stars~1.3k tokensUpdated today
Auto-check passed
Idor Testing
zebbern/claude-code-guide
This skill should be used when the user asks to "test for insecure direct object references," "find IDOR vulnerabilities," "exploit broken access control," "enumerate user IDs or object references,"…
4.6k GitHub starsUsed in 7 repos~3.1k tokens
Auto-check passed

Works with

Node.js

Questions about Chart Image

What does Chart Image do?

Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts. Chart Image is an agent skill from zebbern/claude-code-guide. Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.

When should I use Chart Image?

Chart Image fits situations like: the user asks to visualize data; plot a time series; generate a chart for a report.

How do I install Chart Image in Claude Code?

Run `npx skills add zebbern/claude-code-guide --skill chart-image -a claude-code`. Or copy the skill folder (skills/chart-image in zebbern/claude-code-guide) into .claude/skills/chart-image in your project. Claude Code loads it when a task matches its description.

How do I install Chart Image in Codex?

Run `npx skills add zebbern/claude-code-guide --skill chart-image -a codex`. Or copy the skill folder (skills/chart-image in zebbern/claude-code-guide) into .agents/skills/chart-image in your project. Codex loads it when a task matches its description.

Can I use Chart Image in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zebbern/claude-code-guide --skill chart-image -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chart-image, .gemini/skills/chart-image, .github/skills/chart-image and .opencode/skills/chart-image in your project.

What does Chart Image need to run?

Going by SKILL.md and its folder, Chart Image needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npm). Our summary lists: Node.js; Docker.

Does Chart Image access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Chart Image safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Chart Image use?

Chart Image is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chart Image use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Chart Image?

Skills that share tags, products or a category with Chart Image: Chart Visualization (bytedance/deer-flow, 83k stars), Tufte (aref-vc/tufte-claude-skill, 306 stars), Advanced Data Visualization (Hack23/cia, 239 stars) and Scientific Toolkit Skill (zLanqing/codex-claude-academic-skills, 4.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chart Image?

zebbern (a GitHub user) maintains it in zebbern/claude-code-guide, which has 4,648 GitHub stars. The repository holds 46 skills in this directory. The repository was last updated on October 7, 2026.

Source: zebbern/claude-code-guide on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Chart Image

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

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!

Files

Compare with similar skills

Similar skills

More from zebbern/claude-code-guide

Related

Questions about Chart Image