react-mathplotter

A React math expression plotter built on HTML5 Canvas. Supports interactive zoom, pan, multi-expression plotting with distinct colors, and automatic root detection.

Installation

npm install react-mathplotter

Peer dependencies (you need these in your project):

npm install react react-dom

Quick Start

import PlotCanvas from 'react-mathplotter';

export default function App() {
    return (
        <PlotCanvas
            defaultExpressions={['x^2', 'sin(x)']}
            width={600}
            height={500}
        />
    );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | defaultExpressions | string[] | [] | Uncontrolled initial list of expression strings | | expressions | string[] | — | Controlled list of expression strings | | onExpressionsChange | (texts: string[]) => void | — | Called when the expression list changes (controlled mode) | | onRootsChange | (roots: Root[]) => void | — | Called when found roots update | | width | number | 500 | Canvas width in pixels | | height | number | 500 | Canvas height in pixels | | colors | string[] | built-in palette | Hex colors for each expression line | | initialDomain | { x: [min, max], y: [min, max] } | {x:[-10,10], y:[-10,10]} | Initial visible domain | | style | CSSProperties | — | Inline style for the wrapper element | | className | string | — | CSS class for the wrapper element |

Imperative API (via ref)

Attach a ref to get full programmatic control:

import { useRef } from 'react';
import PlotCanvas from 'react-mathplotter';

export default function App() {
    const plotRef = useRef();

    return (
        <>
            <PlotCanvas ref={plotRef} />

            <button onClick={() => plotRef.current.addExpression('x^2 - 4')}>
                Add x² - 4
            </button>
            <button onClick={() => plotRef.current.resetView()}>
                Reset View
            </button>
            <button onClick={() => {
                const img = plotRef.current.exportImage('png');
                const a = document.createElement('a');
                a.href = img;
                a.download = 'plot.png';
                a.click();
            }}>
                Download PNG
            </button>
        </>
    );
}

ref.current methods

addExpression(text, color?) → ExpressionObj

Add a new math expression to the plot.

const expr = plotRef.current.addExpression('x^2 - 3', '#e11d48');
console.log(expr.id); // save the id for later updates/removal

removeExpression(id)

Remove an expression by the id returned from addExpression.

plotRef.current.removeExpression(expr.id);

updateExpression(id, newText)

Update the text of an existing expression.

plotRef.current.updateExpression(expr.id, 'x^3 - x');

setExpression(index, text)

Set an expression at a specific zero-based index. Creates missing slots automatically.

plotRef.current.setExpression(0, 'sin(x)');
plotRef.current.setExpression(1, 'cos(x)');

clearExpressions()

Remove all expressions and reset to a single empty slot.

plotRef.current.clearExpressions();

getExpressions() → ExpressionObj[]

Returns the current list of expression objects.

const exprs = plotRef.current.getExpressions();
// [{ id, text, color }, ...]

getRoots() → Root[]

Returns the roots found in the current viewport.

const roots = plotRef.current.getRoots();
// [{ x_value: 2, y_value: 0, color: '#0055ff', text: 'x^2 - 4' }, ...]

resetView()

Snap the viewport back to initialDomain.

plotRef.current.resetView();

setDomain(x, y)

Programmatically set the visible viewport.

plotRef.current.setDomain([-5, 5], [-25, 25]);

getDomain() → { x: [min, max], y: [min, max] }

Get the current visible domain.

const { x, y } = plotRef.current.getDomain();

exportImage(format?, quality?) → string

Export the canvas as a data URL. Formats: 'png' (default), 'jpeg', 'webp'.

const dataUrl = plotRef.current.exportImage('jpeg', 0.85);

Controlled Mode

For full external state control:

const [expressions, setExpressions] = useState(['x^2']);

<PlotCanvas
    expressions={expressions}
    onExpressionsChange={setExpressions}
/>

Supported Math Syntax

The plotter uses mathjs for expression parsing. Anything mathjs understands works:

x^2 + 1
sin(x) * cos(x)
sqrt(x)
log(x)
abs(x)
pi * x
e^x

Interactivity

| Action | Effect | |---|---| | Scroll wheel | Zoom in/out anchored to cursor | | Click & drag | Pan the viewport |

License

MIT