A professional tool for converting structured data into interactive, standalone HTML visualization reports powered by Chart.js.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install chartjs-reporter
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 chartjs-reporter 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 Chart.js HTML Reporter?
The Chart.js HTML Reporter is a specialized utility designed to bridge the gap between raw data analysis and visual storytelling. It allows users to take query results, CSV summaries, or Python data structures and instantly generate a self-contained, dark-themed HTML report. These reports are highly portable as they require no server-side processing; they load all necessary dependencies via CDN and open directly in any modern web browser.
By integrating this tool into your workflow, you can automate the creation of professional-grade dashboards. It is particularly effective for presenting SQL results or pandas DataFrames in a visually digestible format, complete with responsive charts and high-impact KPI summary cards. This makes it an essential part of the Openclaw Skills collection for developers and data analysts who need quick, beautiful visualizations.
Chart.js HTML Reporter Use Cases
- Creating visual summaries from DuckDB, SQL, or pandas query results.
- Converting CSV data or Python dictionaries into interactive charts for presentations.
- Generating automated daily or weekly business reports in HTML format.
- Transforming tabular data into pie, bar, or line charts without manual coding.
- Building quick KPI dashboards for real-time data monitoring.
How Chart.js HTML Reporter Works
- Data Acquisition: The skill receives structured data in formats like JSON, Python dicts/lists, or SQL results.
- Insight Analysis: It analyzes the data columns to determine if they are numerical, categorical, or time-based.
- Chart Selection: Based on the analysis goal (e.g., trend, comparison, or composition), it selects the optimal chart type such as doughnut, line, or horizontal bar.
- Configuration Generation: It maps the data into a standardized JSON configuration for Chart.js and KPI cards.
- HTML Compilation: The generate_report.py script assembles the data into a dark-mode HTML template.
- Preview: The resulting file is saved locally and can be instantly previewed in a browser via the preview tool.
Chart.js HTML Reporter Setup
To use this skill within your environment, ensure you have the necessary script files and Python installed. No local Chart.js installation is required as it uses CDN.
# Navigate to your project directory
# Ensure scripts/generate_report.py is present
# Generate a report via CLI
python scripts/generate_report.py \
--title "Sales Report" \
--subtitle "Annual Performance Summary" \
--data '{"charts": [...], "kpis": [...]}' \
--output report.html
Chart.js HTML Reporter Data Schema & Taxonomy
The skill organizes data into two primary components: KPIs and Charts. This structure ensures compatibility with the Openclaw Skills visualization engine.
KPI Schema
| Field | Description | Example |
|---|---|---|
| label | The title of the metric | "Total Revenue" |
| value | The main numerical value | "$1,755,905" |
| sub | Supporting text or context | "Year-to-date" |
| color | Accent color (blue, green, yellow, purple, red) | "green" |
Chart Configuration
- Type: bar, line, doughnut, pie, horizontalBar.
- Labels: Array of strings for the X-axis or categories.
- Datasets: Array of objects containing numerical data and series labels.
Chart.js HTML Reporter Advanced Features
- Dark-mode optimized theme (#0f172a) for professional, high-contrast presentations.
- Automated number formatting for values over 1000, including thousand separators.
- Responsive grid layout that adjusts between 1, 2, or 3 columns based on the number of charts.
- Seamless integration with chat2duckdb for end-to-end SQL-to-Visualization pipelines.
- Built-in color palettes that automatically assign distinct colors to data series without manual configuration.
SKILL.md
Loading
Related Openclaw Skills
Japan Fish Recipe Search
A specialized search utility providing access to over 300 authentic Japanese fish and seafood recipes from Cookpad Japan.
Data Visualization Skill
An intelligent AI agent skill that automatically analyzes dataset features to generate optimized, interactive HTML data visualization dashboards.
Gate-Info Macroimpact Analysis
An AI agent skill designed to correlate global macroeconomic events with cryptocurrency market performance using Gate-Info and Gate-News data.
gate-info-defianalysis
An expert DeFi ecosystem analysis tool for tracking TVL rankings, protocol metrics, yield rates, and exchange reserves.
Flight Price Advisor
A smart travel assistant that provides real-time flight price summaries and data-driven buy or wait recommendations.
Chat2DuckDB
Chat2DuckDB is a high-performance data analysis skill that leverages the DuckDB engine to perform SQL queries and automated exploration on local data files.
Featured*
