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.

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
✎ GitHub© Copyright 2025 by OpenPatch