How do I update the dashboard with new data?

You can provide your data in a JSON-compatible array format within the embedded script tag, and the dashboard class handles the rendering automatically.

What chart types are supported?

It includes standardized implementation patterns for Line, Bar, and Doughnut charts using the popular Chart.js library.

Can I filter the data dynamically?

Yes, the skill provides patterns for dropdown and date range filters that update the charts and KPIs in real-time without refreshing the page.

Does this dashboard require a backend or database?

No, the dashboards generated are self-contained HTML files with embedded data and JavaScript logic that run entirely in the user's browser.

Interactive Dashboard Builder

Name: Interactive Dashboard Builder
Author: lilbom32

bylilbom32

0•

Analytics & Monitoring

Generates self-contained, professional HTML dashboards featuring interactive charts and data filters without requiring a server backend.

This skill provides a comprehensive framework for creating standalone data visualization tools and reports using Chart.js and vanilla JavaScript. It offers a structured approach to building responsive dashboards complete with KPI cards, line, bar, and doughnut charts, and robust filtering systems. This is particularly useful for developers and analysts who need to generate shareable, interactive data reports that function as single HTML files, making them easy to distribute via email or host on static sites while maintaining high interactivity.

Key Features

010 GitHub stars

02Interactive KPI card components with automatic trend calculations

03Multi-criteria filtering logic for real-time data exploration

04Pre-configured Chart.js integration for line, bar, and doughnut charts

05Builds serverless, self-contained HTML/JS dashboard files

06Professional CSS layouts with responsive design patterns

Use Cases

01Building internal analytics tools that run directly in the browser

02Generating shareable weekly business performance reports

03Creating client-side data explorers for static datasets

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lilbom32/ketnoitrithuc interactive-dashboard-builder

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Interactive KPI card components with automatic trend calculations

03Multi-criteria filtering logic for real-time data exploration

04Pre-configured Chart.js integration for line, bar, and doughnut charts

05Builds serverless, self-contained HTML/JS dashboard files

06Professional CSS layouts with responsive design patterns

Use Cases

01Building internal analytics tools that run directly in the browser

02Generating shareable weekly business performance reports

03Creating client-side data explorers for static datasets

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lilbom32/ketnoitrithuc interactive-dashboard-builder

For use in Claude.ai and ChatGPT