Your first plot

Install the runtime shown on this site

The data plotting API is unreleased. This command pins the source commit used by this website; the v0.1.1 release contains the earlier GPU function API. JavaScript and declarations are included in the Git install.

npm install https://github.com/typeshade/typeplot.git#7444877e0037ca2e24e95519f9113922870435e0

Start with one array

Create a container in your page, then call plot. With one array, TypePlot uses zero-based indices for x. Bounds and colors are automatic. A data-only application can import the smaller typeplot/data entry.

import { plot } from "typeplot";

const fig = plot([3, 1, 4, 1, 5], {
  target: "#chart",
  title: "First plot",
  xLabel: "Index",
  yLabel: "Value",
});

Add curves on the same axes

A Figure owns its DOM. Each Axes owns its ranges, color cycle and interaction. There is no global current figure to keep track of. subplots returns the same flat array shape for one or many axes.

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.

Update, save and release

Data is copied on insertion. Use setData to replace it; automatic limits refit unless you have fixed them. PNG export redraws the figure at the requested density. Always destroy a figure when removing its view.

import { subplots, linspace } from "typeplot/data";

const { fig, axes: [ax] } = subplots(1, 1, { target: "#chart" });
const x = linspace(0, 10, 100);
const line = ax.plot(x, x.map(v => v * v));
ax.set({ title: "Quadratic", xLabel: "x", yLabel: "y" });
line.setData(x, x.map(v => v * v * 0.5));
ax.setXLimits(0, 5);
await fig.saveImage("quadratic.png", { pixelRatio: 2 });

// When the view unmounts:
fig.destroy();

Inputs and current limits

The data API uses precompiled TypeShade shaders on WebGPU or WebGL2. Grids, axes, tick numbers, text and series are GPU-rendered. JavaScript callbacks supply sampled data; they are not compiled into shader code.

• x and y must have equal lengths. Arrays and typed arrays are supported.
• NaN and infinity make line gaps and are omitted from bounds.
• Logarithmic axes omit non-positive values; fixed log limits must be positive.
• Numeric bars and histograms are supported. Date axes, categorical axes and SVG/PDF export are not implemented.
• Provide an adjacent description or table when readers need access to individual values.