Build Dashboard Skill

Create self-contained, interactive HTML dashboards that combine KPI cards, charts, tables, and filters into a single shareable file. No server required -- dashboards run entirely in the browser.

Workflow

Step 1: Understand Requirements

Gather these details before building:

1. Audience: Executive (high-level KPIs), manager (operational), analyst (detailed)?
2. Data source: CSV file, SQL results, JSON, or inline data?
3. Key metrics: What KPIs or numbers should be prominently displayed?
4. Visualizations: What charts are needed (trends, comparisons, distributions)?
5. Interactivity: Filters, date pickers, drill-down, search?
6. Refresh cadence: One-time snapshot or regularly updated?

Step 2: Plan the Layout

Use a standard dashboard layout pattern:

+-----------------------------------------------+
|  Header: Title, date range, last refreshed     |
+-----------------------------------------------+
|  KPI Cards Row (3-5 key metrics)               |
|  [Revenue] [Users] [Conversion] [Churn]        |
+-----------------------------------------------+
|  Filters Bar                                   |
|  [Date Range] [Segment] [Region]               |
+-----------------------------------------------+
|  Primary Chart (full width)                    |
|  Trend line or main visualization              |
+-----------------------------------------------+
|  Secondary Charts (2-column grid)              |
|  [Chart A]          [Chart B]                  |
+-----------------------------------------------+
|  Data Table (sortable, searchable)             |
+-----------------------------------------------+
|  Footer: Data source, methodology notes        |
+-----------------------------------------------+

Step 3: Build the HTML Structure

Use this technology stack for self-contained dashboards:

• Chart.js (CDN) for charts -- lightweight, no dependencies
• Vanilla CSS Grid/Flexbox for layout
• Vanilla JavaScript for interactivity and filtering
• Inline data as JSON in a <script> tag

Template structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Dashboard Title]</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* Reset and base styles */
        /* KPI card styles */
        /* Chart container styles */
        /* Table styles */
        /* Filter styles */
        /* Responsive breakpoints */
    </style>
</head>
<body>
    <!-- Header -->
    <!-- KPI Cards -->
    <!-- Filters -->
    <!-- Charts -->
    <!-- Tables -->
    <!-- Footer -->
    <script>
        const DATA = { /* embedded data */ };
        // Chart initialization
        // Filter logic
        // Table rendering
    </script>
</body>
</html>

Step 4: Implement KPI Cards

Each KPI card should display:

• Metric name (label)
• Current value (large, prominent)
• Comparison (vs prior period, with delta and direction arrow)
• Sparkline (optional mini trend)

<div class="kpi-card">
    <div class="kpi-label">Monthly Revenue</div>
    <div class="kpi-value">$2.4M</div>
    <div class="kpi-delta positive">+12% vs last month</div>
</div>

CSS for KPI cards:

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 8px 0;
}
.kpi-delta.positive { color: #16a34a; }
.kpi-delta.negative { color: #dc2626; }

Step 5: Implement Charts

Chart selection guide:

Chart.js configuration best practices:

new Chart(ctx, {
    type: 'line',
    data: { labels, datasets },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom' },
            tooltip: { mode: 'index', intersect: false }
        },
        scales: {
            y: { beginAtZero: false, ticks: { callback: formatNumber } }
        }
    }
});

Step 6: Implement Filters

Build filters that update all charts and KPI cards simultaneously:

function applyFilters() {
    const dateRange = document.getElementById('dateFilter').value;
    const segment = document.getElementById('segmentFilter').value;
    const filtered = DATA.filter(row => {
        return matchesDateRange(row, dateRange) && matchesSegment(row, segment);
    });
    updateKPIs(filtered);
    updateCharts(filtered);
    updateTable(filtered);
}

Step 7: Implement Data Tables

Sortable, searchable tables for detail-level data:

function renderTable(data, columns, containerId) {
    // Sort functionality on column header click
    // Search/filter input
    // Pagination for large datasets
    // Number formatting and alignment
}

Step 8: Add Polish

• Color palette: Use a consistent, accessible palette. Avoid red/green only for status.
• Typography: System font stack for fast loading. Clear hierarchy with size and weight.
• Responsiveness: Test at 1024px, 768px, and 375px widths.
• Loading state: Show a brief loading indicator while charts initialize.
• Print styles: Add @media print rules that remove filters and format for paper.
• Dark mode: Optional prefers-color-scheme: dark support.

Output Format

Deliver a single .html file that:

1. Opens in any modern browser with no server
2. Loads chart library from CDN (with fallback message if offline)
3. Contains all data inline
4. Is responsive from mobile to desktop
5. Has a professional, clean design

Examples

Example 1: Weekly Sales Dashboard

KPI cards for revenue, orders, AOV, conversion rate. Line chart for daily revenue trend. Bar chart for revenue by channel. Donut for revenue by product category. Table of top 10 products.

Example 2: User Engagement Dashboard

KPI cards for DAU, WAU, MAU, session duration. Stacked area chart for engagement over time. Funnel chart for activation steps. Cohort retention heatmap. Table of feature usage.

Example 3: Ops Monitoring Snapshot

KPI cards for uptime, p99 latency, error rate, deploy count. Line chart for latency over 24h. Bar chart for errors by service. Status indicators (green/yellow/red) by endpoint. Incident log table.

Best Practices

1. Keep it focused. A dashboard should answer 3-5 questions, not 30. If you need more, create separate dashboards.
2. KPIs at the top. The most important numbers should be visible without scrolling.
3. Consistent time axis. All time-series charts should share the same x-axis range.
4. Label everything. Chart titles, axis labels, units, and data source attribution.
5. Use consistent number formatting. Pick a format (1.2K, 1,200, $1.2k) and stick with it throughout.
6. Test with real data volumes. Charts behave differently with 10 data points vs 1,000.
7. Include a "last updated" timestamp. Users need to know how fresh the data is.
8. Provide export options. Add a print button or CSV download for the underlying data.
9. Accessible colors. Ensure sufficient contrast and do not rely solely on color to convey meaning.
10. File size. Keep the HTML under 2MB for easy sharing via email or Slack.