Skip to main content
Renders interactive charts live in the browser using Chart.js from data and chart type found in the conversation context. The output is always a self-contained HTML file opened in the browser — never a static image. Use this skill when you want to visualize data, plot numbers, draw a bar chart, line chart, pie chart, radar chart, compare benchmarks, show a cost curve, or display a time series.

​
Invocation

/chart [describe the data or chart you want]
Examples: 
/chart bar chart of monthly revenue for Q1–Q4
/chart line chart comparing model latency across 5 providers
/chart pie chart of market share by vendor
/chart radar chart of feature coverage across tools
/chart time series of daily active users over the last 90 days

​
Supported chart types

TypeWhen to use
barComparing discrete categories
lineTrends over time or ordered sequences
pie / doughnutPart-to-whole relationships
radarMulti-dimensional capability comparisons
Time seriesDense temporal data with date-based x-axis

​
Data format

Provide data in any natural form — the skill extracts labels and values from context. You can supply:
  • A table pasted into the conversation
  • A list of numbers with labels
  • A description such as “revenue was 120 in Jan, 145 in Feb, 130 in Mar”
For multi-dataset charts, name each series clearly: 
Product A: 10, 20, 30
Product B: 15, 25, 35
The skill uses the Chart.js CDN (chart.umd.min.js v4.4.1) and renders entirely in the browser. No data leaves your machine.

​
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 defined in TEMPLATE.md. No ad-hoc inline colors.
3

Write the HTML file

Write a complete self-contained file to /tmp/chart.html using the Chart.js template matching the chart type.
4

Open in browser

Call mcp__chrome-devtools__new_page with url: file:///tmp/chart.html.
5

Wait for render

Call mcp__chrome-devtools__wait_for on a static DOM element (an <h2 id="ready"> placed above the canvas). Chart.js renders to canvas — canvas text is not detectable by wait_for. Timeout 10000ms.
6

Take screenshot

Call mcp__chrome-devtools__take_screenshot and verify the chart is visible with labeled axes and readable text.
7

Fix and reload if broken

If the screenshot shows problems, edit /tmp/chart.html, then call mcp__chrome-devtools__navigate_page with type: reload.

​
Use cases

Benchmark comparisons

Compare throughput, latency, or accuracy across models, tools, or configurations with a grouped bar chart.

Trend analysis

Plot metrics over time — revenue, signups, error rates — with a line or time series chart.

Capability radar

Score multiple dimensions (speed, accuracy, cost, reliability) for each option on a radar chart.

​
Self-review checklist

Before delivering, the skill verifies all of the following:
  • 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

Set dimensions on the wrapper div via CSS (height: 500px). Canvas attributes override Chart.js responsive sizing.
Either setting alone is insufficient — the chart collapses to 0 height without both.
Set Chart.defaults.color and Chart.defaults.borderColor before new Chart(). Without them, all text renders as black and is invisible on the dark background.
Use mcp__chrome-devtools__new_page with url: file:///tmp/chart.html. Use navigate_page with type: reload only for subsequent fixes.
Add an <h2 id="ready"> above the canvas and call wait_for on it. Chart.js renders text onto canvas — canvas text is invisible to wait_for. The static element is the only reliable render signal.
Always use colors from the standard palette array defined in TEMPLATE.md.

​
Reference files

FileContents
TEMPLATE.mdComplete Chart.js HTML templates for bar, line, and pie/doughnut; color palette; data format patterns
TROUBLESHOOTING.mdFailure diagnosis table: symptoms, causes, fixes