interactive-dashboard-builder

name	interactive-dashboard-builder
description	Create self-contained HTML/JavaScript dashboards with Chart.js, filters, and professional styling
type	reference
version	1.0.0
category	data-analytics
last_updated	"2026-02-03T00:00:00.000Z"
source	https://github.com/anthropics/knowledge-work-plugins
related_skills	["data-visualization","data-exploration","sql-queries"]
capabilities	[]
requires	[]
see_also	[]
tags	[]

Interactive Dashboard Builder Skill

Patterns for creating self-contained HTML/JavaScript dashboards using Chart.js, with built-in filtering and professional styling.

Core Architecture

Every dashboard follows this structure with sections for headers, KPI cards, charts, tables, and footers. The foundation uses a Dashboard class that manages data, filtering, and rendering.

Key Components

KPI Cards

Display metrics with formatted values and period-over-period changes. Format currency, percentages, and numbers with automatic scale adjustment (e.g., "$1.5M" for millions).

Chart Types Supported

• Line charts for trends with multiple datasets
• Bar charts with automatic horizontal orientation for 8+ categories
• Doughnut charts for composition analysis

Charts use responsive containers and maintain interactivity through hover tooltips and legend controls. Customize tooltips and formatting per chart type.

Filtering System

Implement dropdown selects, date range inputs, and combined filter logic that triggers real-time updates across all visualizations and tables simultaneously using an applyFilters() function.

Data Tables

Sortable columns with clickable headers toggle ascending/descending order.

Design System

Use CSS custom properties for consistent theming: dark headers, light cards, and a six-color palette for data visualization. Layout relies on CSS Grid for responsive multi-column arrangements that stack to single column on mobile.

Performance Guidelines

Dataset Size	Approach
<1,000 rows	Embed data directly in HTML
1,000-10,000 rows	Pre-aggregate before embedding
>10,000 rows	Pre-aggregate server-side

Chart.js performance limits:

• Line charts: <500 points per series
• Bar charts: <50 categories
• Scatter plots: <1,000 points
• Disable animations when multiple charts exist for better responsiveness

Data Formatting Utilities

Provide utility functions for displaying values as currency, percentages, or abbreviated numbers:

function formatValue(value, type) {
     (type === ) {
         (.(value) >= )  ;
         (.(value) >= )  ;
         ;
    }
     (type === )  ;
     (type === ) {
         (.(value) >= )  ;
         (.(value) >= )  ;
         value.();
    }
     value;
}