---
name: chart
description: Renders interactive charts in the browser using Chart.js. Use when the user wants to visualize data, plot numbers, draw a bar chart, line chart, pie chart, doughnut chart, radar chart, graph metrics, compare benchmarks, show a cost curve, or display a time series. Always renders live in browser — never as a static image.
allowed-tools: Write, Edit, mcp__chrome-devtools__new_page, mcp__chrome-devtools__navigate_page, mcp__chrome-devtools__wait_for, mcp__chrome-devtools__take_screenshot, mcp__chrome-devtools__list_pages

category: tool
capabilities: [trend-tracking]
output_types: [chart, data]
complexity: moderate
cost_profile: low
maturity: beta
metadata_source: inferred
---

# Chart

Renders interactive charts in the browser using Chart.js from context-supplied data and chart type.

## Workflow

1. **Extract data and chart type** — identify labels, datasets, and chart type (bar, line, pie, doughnut, radar) from the user's request or conversation context.
2. **Choose colors** — assign dataset colors from the standard palette. See [TEMPLATE.md](TEMPLATE.md) for the palette.
3. **Write the HTML file** — write a complete self-contained file to `/tmp/chart.html` using the Chart.js template matching the chart type. See [TEMPLATE.md](TEMPLATE.md) for all templates.
4. **Render in browser** — follow [`_shared/chrome-devtools-render.md`](../_shared/chrome-devtools-render.md) to open `/tmp/chart.html`, wait for render, screenshot, and fix-and-reload if needed. `wait_for` the static `<h2 id="ready">` text (Chart.js renders to canvas — canvas text is NOT detectable by `wait_for`). See [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for chart-specific fixes.

## Self-review checklist

Before delivering, verify ALL:

- [ ] Screenshot shows the chart with visible title, labels, and data — no blank canvas
- [ ] Chart text is readable on dark background — not invisible black-on-dark
- [ ] Container div has explicit `height` (e.g. `500px`) in CSS — not just on the canvas element
- [ ] Both `responsive: true` and `maintainAspectRatio: false` are set in chart options
- [ ] `Chart.defaults.color` and `Chart.defaults.borderColor` are set before `new Chart()`
- [ ] Dataset colors are from the standard palette — no ad-hoc inline colors
- [ ] CDN URL is exactly `https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js`
- [ ] `wait_for` is called with the chart title text before `take_screenshot`

## Golden rules

Hard rules. Never violate these.

1. **Never set width or height on the canvas element.** Set dimensions on the wrapper div via CSS (`height: 500px`). Canvas attributes override Chart.js responsive sizing.
2. **Always set both `responsive: true` and `maintainAspectRatio: false`.** Either alone is insufficient — the chart collapses to 0 height without both.
3. **Always set `Chart.defaults.color` and `Chart.defaults.borderColor` before creating any chart.** Without them, all text renders as black and is invisible on the dark background.
4. **Always use `new_page` for first open.** Use `mcp__chrome-devtools__new_page` with `url: file:///tmp/chart.html`. Use `navigate_page` with `type: reload` only for subsequent fixes.
5. **Always add a static `<h2 id="ready">Title</h2>` above the canvas and `wait_for` it.** Chart.js renders text onto canvas — canvas text is invisible to `wait_for`. The static element is the only reliable render signal.
6. **Never hardcode colors inline in datasets.** Always use colors from the standard palette array defined in TEMPLATE.md.

## Reference files

| File | Contents |
|------|----------|
| [TEMPLATE.md](TEMPLATE.md) | Complete Chart.js HTML templates for bar, line, and pie/doughnut; color palette; data format patterns |
| [TROUBLESHOOTING.md](TROUBLESHOOTING.md) | Failure diagnosis table: symptoms, causes, fixes |

## Sharing

To share externally, invoke `Skill(skill="upload-presentation", args="<html_file_path>")` to upload to S3 genpop.