Graph 2D

An interactive Cartesian plane drawn with SVG. Plot any number of functions and points; drag to pan, scroll to zoom and hover to read values.

Pair it with compileFn from @indoku/science to plot expressions typed by the user. Discontinuities such as tan(x) are split automatically.

Markdown

Import

tsx

import { Graph2D } from "@indoku/ui"import { compileFn } from "@indoku/science"

Examples

Basic usage

Functions are plain JavaScript callbacks.

sin x

cos x

tsx

function Graph2DBasic() {  return (    <Graph2D      functions={[        { fn: Math.sin, label: "sin x" },        { fn: Math.cos, label: "cos x", color: "danger", dashed: true },      ]}    />  )}

Points and viewport

Label key points and choose the initial area.

x² − 2x − 3

tsx

function Graph2DPoints() {  return (    <Graph2D      viewport={{ xMin: -2, xMax: 6, yMin: -4, yMax: 10 }}      functions={[{ fn: (x) => x * x - 2 * x - 3, label: "x² − 2x − 3" }]}      points={[        { x: -1, y: 0, label: "root" },        { x: 3, y: 0, label: "root" },        { x: 1, y: -4, label: "vertex", color: "warn" },      ]}    />  )}

Expression input

compileFn parses text without eval.

f(x) = sin(x) / x

tsx

function Graph2DExpression() {  const [expr, setExpr] = useState("sin(x) / x")  const result = useMemo(() => {    try {      return { fn: compileFn(expr), error: "" }    } catch (e) {      return { fn: null, error: (e as Error).message }    }  }, [expr])  return (    <div style={{ display: "grid", gap: 8 }}>      <input value={expr} onChange={(e) => setExpr(e.target.value)} placeholder="f(x) = ..." style={{ padding: 6, fontFamily: "monospace" }} />      {result.error && <small style={{ color: "crimson" }}>{result.error}</small>}      <Graph2D functions={result.fn ? [{ fn: result.fn, label: `f(x) = ${expr}` }] : []} />    </div>  )}

Static

Turn off interaction and grid for a figure.

tsx

function Graph2DStatic() {  return <Graph2D interactive={false} grid={false} aspect={2} viewport={{ xMin: 0, xMax: 6.3, yMin: -1.5, yMax: 1.5 }} functions={[{ fn: Math.sin }]} />}

Props

Graph2D

Prop	Type	Default	Description
`functions`	`GraphFunction[]`	–
`points`	`GraphPoint[]`	–
`viewport`	`GraphViewport`	`-10..10 on both axes`	Initial visible area.
`aspect`	`number`	–	Width / height. Default 16/10.
`interactive`	`boolean`	–	Drag to pan, scroll to zoom, hover to read values. Default true.
`grid`	`boolean`	–

* required. Style props and HTML attributes are accepted as well.

Accessibility

Provide the same data as a table or equation in text for screen readers.

Notes

CartesianCanvas is an alias of Graph2D.

← Plot 2D Plot 3D →

Created by @indokudev