A high-performance charting skill that renders structured data into static images using ECharts without requiring browser automation.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install data-charts-visualization
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install data-charts-visualization using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Data Charts Visualization?
Data Charts Visualization is a specialized tool designed to bridge the gap between raw data and visual insights within the ecosystem of Openclaw Skills. It allows AI agents to generate professional charts and graphs—including line, bar, pie, and radar plots—directly from structured formats like CSV, JSON, or SQL results. Unlike traditional methods that rely on heavy browser runtimes, this skill utilizes a lightweight Node.js environment to render static PNG or SVG images efficiently.
The skill is built on a robust architecture that separates business logic from presentation. By utilizing a strict three-way split between data, config, and variant, it ensures that style rules remain consistent across different reports while allowing for one-off visual adjustments. This makes it an essential component for any developer looking to add reporting and dashboard capabilities to their AI agents.
Data Charts Visualization Use Cases
- Creating automated business intelligence reports from SQL database queries.
- Visualizing conversion funnels and marketing drop-off rates from analytical datasets.
- Generating trend analysis charts for financial or performance metrics over time.
- Producing high-quality KPI dashboards with gauge and radar charts for quick status checks.
- Transforming complex JSON responses from APIs into easy-to-read report graphics.
How Data Charts Visualization Works
- The AI agent analyzes the user's request and identifies the need for a visual chart or graph.
- The source data is transformed into a structured data payload containing the business values and axis labels.
- A matching style configuration is retrieved from the persistent config storage provided by Openclaw Skills.
- Specific visual variants, such as horizontal orientation or stacking, are applied to the render request.
- The local CLI entrypoint is invoked to process the parameters and render a static image file.
- The resulting image path or direct visual output is delivered to the user based on the channel's capabilities.
Data Charts Visualization Setup
# Navigate to the skill directory
cd {baseDir}
# Install the necessary Node.js dependencies
npm install
# The CLI entrypoint will be available at:
# ./node_modules/.bin/areslabs-data-charts
Data Charts Visualization Data Schema & Taxonomy
The skill organizes its operations through three distinct JSON schemas to maintain clean separation of concerns:
| Schema | Purpose | Examples |
|---|---|---|
| data | Contains the core business information and chart structure | title.text, series data, xAxis categories, dataset |
| config | Defines reusable presentation and styling rules | palette, background color, legend position, font sizes |
| variant | Handles one-off visual decisions for the specific render | horizontal vs vertical, stacked bars, donut vs pie |
Persistent configuration files are stored in the config directory, ensuring a consistent look and feel across all Openclaw Skills visualization tasks.
Data Charts Visualization Advanced Features
- Browserless rendering for high performance and low resource consumption.
- Persistent styling system allowing users to save and reuse custom themes across multiple sessions.
- Support for a wide range of chart families including line, bar, pie, gauge, area, dual-axis, scatter, radar, and funnel charts.
- Built-in handoff logic to a web-based configuration page for complex style fine-tuning.
- Intelligent chart selection priority to ensure the most effective visual representation is chosen by default within Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Session Logs Analyzer
A high-performance forensic toolset for auditing OpenClaw session history to identify cost regressions and behavioral anomalies.
Instagram Poster Skill
An AI-driven skill designed to streamline the creation of Instagram posts by generating captions, hashtags, and visual prompts from a single topic.
Claude Skill Sync
A powerful utility to synchronize and resolve conflicts between Claude Code and OpenClaw skill directories.
AgentWorld AI Reasoning Trial
AgentWorld is a 5-chapter reasoning adventure designed to benchmark an AI's cognitive capabilities through complex decision-making and memory tests.
WeChat Article to Markdown
A specialized tool for converting WeChat Official Account articles into clean, archive-ready Markdown files with full image and metadata support.
Waquanquaner Food Delivery Coupon Miner
A specialized mining tool that discovers and retrieves hidden daily coupons for major Chinese food delivery platforms like Meituan and Ele.me.
METADATA
Featured*
