Pass your data
Use arrays, typed arrays or JavaScript callbacks. Automatic ranges and colors handle the first plot.
plot(x, y)A plotting library for TypeScript
From data to plot.
Right in the browser.
Pass an array or a function. Get axes, curves and a view you can explore. Compose figures, refine the details and save the result.
The data API is pre-release. The guide pins the same runtime used on this site.
import { subplots, linspace } from "typeplot";
const { fig, axes: [ax] } = subplots();
const x = linspace(0, 2 * Math.PI, 200);
ax.plot(x, Math.sin, { label: "Sine" });
ax.plot(x, Math.cos, { label: "Cosine", lineStyle: "--" });
ax.set({ xLabel: "Angle (radians)", yLabel: "Amplitude" });
ax.grid();
ax.legend();
// Call fig.destroy() when the view unmounts.Real TypePlot · TypeShade · sine and cosine, x = 0…2π, amplitude −1…1
From values to a figure
Start with a line. Build the figure you need.
Compose the view
Layer series on the same axes or split them into subplots. Add labels, legends and log scales.
subplots(2, 2)Explore and save
Pan and zoom with the pointer or keyboard. Update the data, then export the figure to PNG.
await fig.saveImage("plot.png")Keep exploring
See the plot. Read the code. Make it yours.
Follow a small runnable example into the guides, practical reference and complete source.
TypeShade + TypePlot
Functions have a GPU path, too.
Compile named TypeShade callbacks at build time. Render scalar functions and spatial trajectories with WebGPU and WebGL2. Data figures use the same TypeShade rendering foundation.