chart

Render raw data as interactive Chart.js browser charts with screenshot verification.

4|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/npow/claude-skills --skill chart-npow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chart
Source: https://github.com/npow/claude-skills/tree/main/chart
Command: npx skills add https://github.com/npow/claude-skills --skill chart-npow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns raw data and chart requests into readable, interactive browser visualizations, avoiding static images and manual chart configuration.

Core Features & Use Cases

  • Interactive Chart Rendering: Creates live bar, line, pie, doughnut, and radar charts with Chart.js.
  • Data Visualization Guidance: Selects chart types, formats datasets, assigns consistent colors, and supports trends, comparisons, proportions, and benchmarks.
  • Render Validation: Opens the generated chart in a browser, waits for a reliable render signal, captures a screenshot, and diagnoses common sizing, styling, CDN, and JavaScript issues.
  • Use Case: Compare model benchmarks across multiple criteria with a radar chart or display monthly revenue trends with a responsive line chart.

Quick Start

Ask the chart skill to render the provided dataset as an interactive chart in the browser and verify the result with a screenshot.

Frequently Asked Questions about chart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render interactive charts in a browser instead of static images?

Interactive charts render directly in the browser using Chart.js, replacing static images with live visuals. The Skill generates bar, line, pie, doughnut, and radar charts, then opens them in a browser to verify the result with a screenshot.

Can I use Chart.js to visualize time series and benchmark comparison data?

Chart.js supports time series and benchmark comparison visualizations natively. The Skill automatically selects appropriate chart types like line charts for trends and radar charts for multi-criteria benchmark analysis, formatting datasets and assigning consistent colors.

What's the best way to display category comparisons and part-of-whole proportions?

Category comparisons and part-of-whole proportions are best displayed using bar, pie, and doughnut charts. The Skill configures responsive container sizing and visual defaults to render these interactive browser charts accurately.

Does browser rendering for data visualization require specific dependencies or components?

Browser rendering requires Chart.js, responsive container sizing, configured visual defaults, a static render signal, and browser-based screenshot verification. No external components or dependencies are needed beyond the browser environment.

Why does my interactive chart fail to render properly in the browser?

Interactive charts fail to render due to common sizing, styling, CDN, and JavaScript issues. The Skill diagnoses these problems by waiting for a reliable render signal and capturing a screenshot to verify the visualization.

How do I verify that my generated chart displays correctly?

Verify generated charts by opening them in a browser, waiting for a reliable render signal, and capturing a screenshot. This render validation process diagnoses common sizing, styling, and JavaScript issues to ensure accurate data visualization.