Tables & Charts for AI Agents: How My OpenClaw Learned to Visualize Data

I run an OpenClaw agent on a small Fly.io machine. It helps me track crypto prices, prediction markets, developer metrics, and daily tasks — sending updates to Discord and Telegram throughout the day.

The problem? Every time it tried to show me structured data, I got… ASCII art that looked like this:

+--------+-------+--------+
| Symbol | Price | Change |
+--------+-------+--------+
| AAPL   | $185  | +2.5%  |
| GOOGL  | $141  | -1.2%  |
+--------+-------+--------+

On mobile? Broken. On Discord? Mangled. On Telegram? Don’t even ask.

Tables: The Everyday Need

Here’s the truth: my agent generates tables constantly. Task lists, comparison data, portfolios, leaderboards, schedules — most AI responses that aren’t pure prose are naturally tabular.

But ASCII tables are a disaster on messaging platforms:

• Discord — Strips monospace formatting unpredictably
• Telegram — Narrow screens wrap everything
• Mobile — Horizontal scroll nightmares
• Dark mode — Zero visual hierarchy

I needed tables that render as images — clean, consistent, and beautiful on every device.

The Solution: table-image

table-image is an OpenClaw skill that takes JSON data and generates a clean PNG table. No browser, no Puppeteer, no cloud API — just Node.js and Sharp.

Here’s what my agent produces now:

Dark Mode for Discord

My agent runs --dark by default. The tables match Discord’s dark theme perfectly — no jarring white rectangles in a dark channel.

Smart Formatting

Numbers automatically right-align. Headers use your brand color. Alternating row stripes add visual hierarchy. No configuration needed — it just looks right.

---

Charts: When Data Tells a Story

Tables handle what the data is. But sometimes you need to show how it’s changing — trends, comparisons, distributions. That’s where chart-image comes in.

Same philosophy: no Puppeteer, no cloud APIs, runs on a 256MB Fly.io instance. Nine chart types, dark mode, reference lines, annotations — everything an agent needs.

---

How My Agent Uses These Together

The real power is skill composition — chaining these with other OpenClaw skills:

📊 Portfolio Update
Fetch crypto prices → table-image for current holdings → chart-image for 24h price trend → send to Telegram as a single update.

🔮 Prediction Market Monitor
polymarket skill fetches odds → chart-image generates focus chart on big moves → search-x pulls context from Twitter → table-image summarizes the key markets → all delivered to Discord.

☀️ Morning Brief
calendar skill gets today’s events → weather skill gets forecast → table-image renders the schedule → everything combined into one scannable Telegram message.

👨‍💻 Sprint Status
GitHub data → table-image for task status → chart-image for burndown → post to team Discord channel.

No human involved. The agent orchestrates everything.

---

Technical Specs

table-image

Runtime	Node.js — just Sharp, no native deps
Rendering	SVG → Sharp → PNG
Speed	~50ms per table
Memory	~20MB peak
Features	Dark/light mode, custom colors, auto-alignment, column filtering, emoji support

chart-image

Runtime	Node.js — Vega-Lite + Sharp
Speed	~200ms per chart
Memory	~50MB peak
Chart types	Line, bar, area, pie/donut, heatmap, candlestick, stacked, multi-series, sparkline
Features	Dark mode, reference lines, value labels, focus zoom, annotations

Both run on Fly.io free tier, Raspberry Pi, or any Node.js environment. No Puppeteer, no headless Chrome, no cloud APIs.

---

Get Them

Just tell your OpenClaw agent:

“Install table-image and chart-image from ClawHub”

Your agent finds them on ClawHub, installs them, and starts using them immediately. Published under @dannyshmueli — open source and free.

• table-image: clawhub.ai/skills/table-image-generator
• chart-image: clawhub.ai/skills/chart-image

---

These skills were built by my agent, improved nightly by that same agent, and used by it every single day. The tables and charts in this post were generated by the skills themselves, for this post. Dogfooding all the way down. 🐱🦞