PlottersSkill

High-performance plotting for TypeScript / JavaScript, powered by the Rust plotters crate with a matplotlib pyplot-like API.

Works in Node.js (native addon via napi-rs) and the browser (WASM + SVG / Canvas via wasm-bindgen).

Quick Start

Node.js

npm install plotters-skill

import { figure } from 'plotters-skill';

const fig = figure();
fig.title('Hello PlottersSkill');
fig.plot([0, 1, 2, 3, 4], [10, 25, 18, 30, 22], {
  color: 'steelblue', label: 'Revenue',
});
fig.savefig('chart.png');

Browser (WASM)

import init, { figure } from 'plotters-skill';

await init();
const fig = figure();
fig.hist([1, 2, 2, 3, 3, 3, 4, 5], { bins: 10, color: 'steelblue' });
fig.draw(canvas);  // render to an HTML5 Canvas element

Chart Types

Chart	figure()	axes()	Node	WASM
Histogram	✅	—	✅	✅
Pie / Donut	✅	—	✅	✅
Box Plot	✅	—	✅	✅
Area (fillBetween)	✅	✅	✅	✅
Candlestick (OHLC)	✅	—	✅	✅
Line	✅	✅	✅	✅
Scatter	—	✅	✅	✅
Bar	—	✅	✅	✅
Step	—	✅	✅	✅

API Overview

Function	pyplot Equivalent	Description
figure()	plt.figure()	Single figure — hist, pie, plot, fillBetween, candlestick, boxplot
axes()	fig, ax = plt.subplots()	Flexible Cartesian axes — mix plot, scatter, bar, step, fillBetween
subplots(nrows, ncols)	plt.subplots(nrows, ncols)	Uniform NxM subplot grid
gridFigure()	plt.subplot_mosaic()	Flexible grid — each row can have different column counts

Examples

Multi-series overlay (auto-cycling colours)

import { figure } from 'plotters-skill';

const fig = figure();
fig.title('Sales Comparison');
fig.xlabel('Month');
fig.ylabel('Revenue');
fig.fillBetween(months, seriesA, { alpha: 0.3, label: 'Product A' });
fig.fillBetween(months, seriesB, { alpha: 0.3, label: 'Product B' });
fig.savefig('comparison.png');

Mixed series with axes()

import { axes } from 'plotters-skill';

const ax = axes();
ax.figsize(900, 540);
ax.title('Trend vs Actual');
ax.xlabel('x');
ax.ylabel('y');
ax.plot([0, 1, 2, 3, 4], [10, 25, 18, 30, 22], {
  color: 'steelblue', lineWidth: 2, label: 'Trend',
});
ax.scatter([0, 1, 2, 3, 4], [12, 20, 22, 28, 25], {
  color: 'coral', markerSize: 6, label: 'Actual',
});
ax.legend(true);
ax.savefig('chart.png');

Subplot grid

import { subplots } from 'plotters-skill';

const grid = subplots(1, 2);
grid.figsize(1200, 500);
grid.suptitle('Dashboard');

let ax = grid.ax(0, 0);
ax.hist(data, { bins: 25, color: 'steelblue' });
grid.setAx(0, 0, ax);

ax = grid.ax(0, 1);
ax.pie([40, 30, 20, 10], {
  labels: ['Web', 'Mobile', 'Desktop', 'Other'],
});
grid.setAx(0, 1, ax);

grid.savefig('dashboard.png');

Animated GIF (Node.js)

const frames = [];
for (let i = 2; i <= x.length; i++) {
  frames.push([{ x: x.slice(0, i), y: y.slice(0, i) }]);
}
fig.savegif('animation.gif', { frames, delayMs: 200 });

Output Formats

Format	Node	WASM
PNG file (savefig)	✅	—
Animated GIF (savegif)	✅	—
SVG string (render)	✅	✅
HTML5 Canvas (draw)	—	✅

Colours

Supports matplotlib tab10 palette (c0–c9), common CSS names (steelblue, coral, gold, teal, …), and hex codes (#RRGGBB). Colours auto-cycle through tab10 when omitted in multi-series charts.

VS Code Extension

The PlottersSkill extension brings chart generation directly into VS Code via Copilot Chat. Install the .vsix or search for "PlottersSkill" in the marketplace.

@plotters Chat Participant

Type @plotters in Copilot Chat followed by a natural language description:

@plotters a histogram of 500 normally-distributed values with 30 bins
@plotters /pie revenue split: Web 40%, Mobile 30%, Desktop 20%, Other 10%
@plotters /line monthly sales for 2024 with three product lines

Slash commands: /histogram, /pie, /line, /scatter, /area, /boxplot, /candlestick, /axes, /subplots.

How it works

1. Your prompt is sent to the Copilot LLM with the plotters-skill API reference
2. The LLM generates a TypeScript script
3. The script is type-checked against the .d.ts — errors are fed back for auto-fix (up to 3 retries)
4. The passing script runs in a sandboxed VM — no filesystem or network access
5. The rendered chart image is sent back to the LLM for verification
6. The PNG is displayed inline in chat

Features

Feature	Description
Chart History	Gallery sidebar in Explorer — browse, re-render, or delete past charts
Edit Script	One-click button opens the generated TypeScript with a "▶ Render Chart" CodeLens
LLM Verification	Charts are verified against the original request; mismatches trigger automatic retry
Inline Errors	Type-check and runtime errors shown in chat during retries
Feedback Tracking	👍/👎 on chat responses tracked for stats (PlottersSkill: Show Feedback Stats)
Notebook Support	*.plotters-notebook files — TypeScript cells execute with inline PNG output
Render from Editor	PlottersSkill: Render Chart from Active Editor — run any .ts script directly
Configurable	Settings for retry count, VM timeout, preferred model, and source visibility

AI Skill Installation

The bundled SKILL.md can be installed into any project so Copilot, Claude, or other AI tools automatically discover the plotters-skill API:

npx plotters-skill install-skill                    # all tools
npx plotters-skill install-skill --target copilot   # .github/skills/plotters-skill/
npx plotters-skill install-skill --target claude     # .claude/skills/plotters-skill/

Development

See DEV.md for prerequisites, build commands, tests, and project structure.

License

MIT