Hyperbook Documentation

JSXGraph

JSXGraph is a JavaScript library for interactive geometry, function plotting, charting, and other mathematical visualizations in a web browser. It is free and open-source, and can be used to create dynamic and interactive mathematical content.

You can embed JSXGraph in your book using the jsxgraph element. You can use the height and width attributes to set the size of the JSXGraph board. The boundingbox attribute is used to set the bounding box of the board. The axis and grid attributes are used to show or hide the axis and grid.

Attributes

Attribute Description Default
height Height of the JSXGraph board in pixels 600
width Width of the JSXGraph board in pixels 800
boundingbox Visible board area as [left, top, right, bottom] [-5, 5, 5, -5]
axis Show or hide the axes true
grid Show or hide the grid true

In your code you must use the board variable to access the JSXGraph board. You can create points, lines, curves, and other elements on the board using the board.create method. The first argument is the type of element you want to create, and the second argument is an array of parameters for the element.

You can find the documentation for JSXGraph here and examples here.

 
:::jsxgraph{height="500" width="600" boundingbox="[-10,10,14,-10]" axis=false grid=false}
 
```js
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],
{curveType:'polar', strokewidth:4});
```
 
:::
 

You can also create very complex JSXGraph visualizations.

JSXGraph

Create Shareable URL

Select Sections

✎ GitHub© Copyright 2026 by OpenPatch