Skills chart-splat
Generate beautiful charts via the Chart Splat API. Use when the user asks to create, generate, or visualize data as charts, graphs, or plots. Supports line, bar, pie, doughnut, radar, polar area, and candlestick/OHLC charts. Returns PNG images.
git clone https://github.com/openclaw/skills
T=$(mktemp -d) && git clone --depth=1 https://github.com/openclaw/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/bobbyg603/chart-splat" ~/.claude/skills/clawdbot-skills-chart-splat && rm -rf "$T"
skills/bobbyg603/chart-splat/SKILL.mdChart Splat
Generate beautiful charts from data using the Chart Splat API. Charts are rendered server-side with Chart.js and returned as PNG images.
Supported Chart Types
| Type | Best For |
|---|---|
| Trends over time |
| Comparing categories |
| Parts of a whole |
| Parts of a whole (with center space) |
| Multivariate comparison |
| Comparing categories with radial layout |
| Financial/crypto OHLC price data |
| Financial/crypto OHLC price data (bar variant) |
Method 1: CLI (Preferred)
Use the
chartsplat CLI via npx. No install required.
npx -y chartsplat-cli bar \ --labels "Q1,Q2,Q3,Q4" \ --data "50,75,60,90" \ --title "Quarterly Revenue" \ --color "#8b5cf6" \ -o chart.png
CLI Options
| Flag | Description |
|---|---|
| Comma-separated labels |
| Comma-separated numeric values |
| Chart title |
| Dataset label for legend |
| Background color |
| Image width (default: 800) |
| Image height (default: 600) |
| Output file path (default: chart.png) |
| JSON config file for complex charts |
CLI Chart Commands
npx -y chartsplat-cli line -l "Mon,Tue,Wed,Thu,Fri" -d "100,200,150,300,250" -o line.png npx -y chartsplat-cli bar -l "A,B,C" -d "10,20,30" -o bar.png npx -y chartsplat-cli pie -l "Red,Blue,Green" -d "30,50,20" -o pie.png npx -y chartsplat-cli doughnut -l "Yes,No,Maybe" -d "60,25,15" -o doughnut.png npx -y chartsplat-cli radar -l "Speed,Power,Range,Durability,Precision" -d "80,90,70,85,95" -o radar.png npx -y chartsplat-cli polararea -l "N,E,S,W" -d "40,30,50,20" -o polar.png npx -y chartsplat-cli candlestick --config ohlc.json -o chart.png
Candlestick Charts
Candlestick and OHLC charts require a JSON config file since the data format is more complex than a simple CSV list. Use
--config to provide a file with OHLC data points.
npx -y chartsplat-cli candlestick --config ohlc.json -o candlestick.png
Config format (
ohlc.json):
{ "type": "candlestick", "data": { "datasets": [{ "label": "VVV Price", "data": [ { "x": 1740441600000, "o": 4.23, "h": 4.80, "l": 4.10, "c": 4.45 }, { "x": 1740528000000, "o": 4.45, "h": 5.50, "l": 4.30, "c": 5.34 }, { "x": 1740614400000, "o": 5.34, "h": 6.20, "l": 5.10, "c": 5.97 } ] }] } }
Each OHLC data point requires:
x (numeric timestamp in ms, or a date string like "2025-02-25"), o (open), h (high), l (low), c (close).
Complex Charts via Config File
For multi-dataset or customized charts, write a JSON config file then pass it to the CLI:
npx -y chartsplat-cli bar --config chart-config.json -o chart.png
See examples/sample-charts.json for config file examples and references/api-reference.md for the full config schema.
Method 2: Helper Script
Use the bundled script for quick generation without installing the CLI:
node scripts/generate-chart.js bar "Q1,Q2,Q3,Q4" "50,75,60,90" "Revenue" chart.png
Or with a config file:
node scripts/generate-chart.js --config chart-config.json -o chart.png
Output Handling
- Charts are saved as PNG files to the specified output path
- Default output is
in the current directorychart.png - For messaging platforms (Discord, Slack), return the file path:
MEDIA: /path/to/chart.png - The CLI and helper script handle base64 decoding automatically
Error Handling
| Error | Cause | Fix |
|---|---|---|
| Missing | Set the env var in agent config |
| Wrong or revoked key | Generate a new key at chartsplat.com/dashboard |
| Monthly quota reached | Upgrade plan or wait for reset |
| Bad request payload | Check that and are present (candlestick/ohlc only require ) |
Tips
- Always provide both
andlabels
arrays of the same lengthdata - Use hex colors (e.g.,
) for consistent styling#8b5cf6 - For pie/doughnut charts, use an array of colors for
to color each segmentbackgroundColor - Default dimensions (800x600) work well for most uses; increase for presentations
- The
flag accepts any valid Chart.js configuration for full customization--config