Scientific web 12 min

Interactive graphs — `<mp-jsxgraph>`

<mp-jsxgraph> is mathpad's native graphics system. You describe a mathematical plot in a few lines of JavaScript: axes, function curve, points, lines, circles. The result is a true vector drawing, sharp at any zoom, lightweight — the ideal replacement for a PNG image fixed at creation time that goes stale at the first correction.

First function curve

A parabola $y = x^2$ between $x = -3$ and $x = 3$:

HTML

<mp-jsxgraph width="480" height="360" bounds="-3.5,10,3.5,-1">
board.create('functiongraph',
  [function(x) { return x*x; }, -3, 3],
  { strokeColor: 'red', strokeWidth: 2 }
);
</mp-jsxgraph>

Output

board.create('functiongraph', [function(x) { return x*x; }, -3, 3], { strokeColor: 'red', strokeWidth: 2 } );

Graph attributes

Attribute	Values	Description
width	px (default 400)	Width. Use `300` for mobile-friendly.
height	px (default 400)	Height.
bounds	x_min, y_max, x_max, y_min	Visible window of the math plane. Unusual order: top-left corner first, then bottom-right. Example: `"-3.5,10,3.5,-1"`.
axis	true (default) \| false	Draws the axes with tick labels.
grid	true \| false (default)	Background grid.
pan	true \| false (default)	If enabled, the student can pan the graph with the mouse.
zoom	true \| false (default)	If enabled, mouse-wheel zoom.
highlight	true \| false (default)	Hover effect on points and curves.

Static by default pan, zoom, highlight are all off by default: the graph is a fixed figure like an image. Mathpad automatically enables the natural vertical scrolling of the page when the student passes their finger on the graph — no blocker on phones.

Common objects

Points, labels, segments

HTML

<mp-jsxgraph width="480" height="360" bounds="-1,5,5,-1" grid="true">
var A = board.create('point', [1, 1], { size: 3, color: 'red',  fixed: true, withLabel: false });
var B = board.create('point', [4, 3], { size: 3, color: 'blue', fixed: true, withLabel: false });
board.create('segment', [A, B], { strokeColor: 'black', strokeWidth: 2 });

// Étiquettes placées à la main pour éviter le segment AB
board.create('text', [0.55, 0.5, 'A'], { fontSize: 16, fixed: true, strokeColor: 'red',  useKatex: false, display: 'internal' });
board.create('text', [4.15, 3.5, 'B'], { fontSize: 16, fixed: true, strokeColor: 'blue', useKatex: false, display: 'internal' });
</mp-jsxgraph>

Output

Tangent at a point

HTML

<mp-jsxgraph width="480" height="360" bounds="-1.5,4,4,-1" grid="true">
var f = function(x) { return 0.25*x*x; };
var cf = board.create('functiongraph', [f, -2, 4], { strokeColor: 'red', strokeWidth: 2, name: 'C', withLabel: false, dash: 0, strokeWidth: 2, highlight: false});
var tan = board.create('tangent',[ cf, A ], {id: 'tan', name : 'tan', fixed: true, strokeColor: 'rgb(0,150,255)', dash: 0, strokeWidth: 2, highlight: false});

Output

Déplacer le point $A$

Circle and geometry

HTML

<mp-jsxgraph width="380" height="380" bounds="-3,3,3,-3" axis="false" grid="true">
var O = board.create('point', [0, 0], { name: 'O', fixed: true, size: 3 });
            var circle = board.create('circle', [O, [2,0]], { strokeColor: 'purple', strokeWidth: 2 });
            var M = board.create('glider', [2, 0, circle], { name: 'M', size: 3 });
            board.create('segment', [O, M], { strokeColor: 'gray', dash: 2 });
</mp-jsxgraph>

Output

Déplacer le point $M$

Formulas in labels

You can write labels with formulas: enter LaTeX surrounded by $...$ in name: or in the text of a text object, mathpad renders it automatically.

HTML

<mp-jsxgraph width="480" height="360" bounds="-3.5,2,3.5,-2" grid="true">
board.create('functiongraph',
  [function(x) { return Math.sin(x); }, -Math.PI, Math.PI],
  { strokeColor: 'red', strokeWidth: 2, name: '$f(x) = \\sin(x)$', withLabel: true }
);
board.create('text', [2, -1.5, '$y = \\sin(x)$'], { strokeColor: 'red', fontSize: 16 });
</mp-jsxgraph>

Output

board.create('functiongraph', [function(x) { return Math.sin(x); }, -Math.PI, Math.PI], { strokeColor: 'red', strokeWidth: 2, name: '$f(x) = \\sin(x)$', withLabel: true }); board.create('text', [2, -1.5, '$y = \\sin(x)$'], { strokeColor: 'red', fontSize: 16 });

Mobile format

Use width="300" for a graph that fits in 355 px of screen width. A 16 px touch zone around the graph lets the student scroll the page vertically without being blocked when their finger lands on the figure. If the graph is still wider, a horizontal scrollbar appears automatically, with a touch zone above it to avoid having to aim straight at the bar.

Visual editor in the IDE In the mathpad editor, the menu Graphics → Figure (JSXGraph) opens a panel where you draw points, segments, functions directly with the mouse, then set the viewport — the editor generates the ready-to-paste <mp-jsxgraph> code. You skip the manual handling of coordinates and styles. If you convert a .tex with tikz/pstricks, PNG images are produced automatically instead — see mp-figure.

Full JSXGraph documentation mathpad uses the JSXGraph library from Bayreuth University directly. All object types (polygon, angle, ellipse, parametric curve…) and all options are documented at jsxgraph.org/docs. What you see here is only a selection of the most common features.

Ready to try mathpad?

Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.

Open the editor Import a .tex

← Previous page Variation tables Next page → References and bibliography

Interactive graphs — <mp-jsxgraph>

First function curve

Graph attributes

Common objects

Points, labels, segments

Tangent at a point

Circle and geometry

Formulas in labels

Mobile format

Ready to try mathpad?

Interactive graphs — `<mp-jsxgraph>`