# JSXGraph Board Attributes

The JSXGraph Reference Card discusses other options for board initialization, but the only ones I could get to work are those listed here.

# BOARD ATTRIBUTES

{attributeName1:value1, attributeName2:value2, ...}

 attribute name attribute value description boundingbox [x1,y1,x2,y2] user coordinates of upper left corner (x1,y1) and bottom right corner (x2,y2) of bounding box keepaspectratio true, false default is false; the $y$-axis is adjusted, as needed, to make one horizontal unit equal to one vertical unit, so that (for example) circles defined by functions actually look like circles axisgridshowNavigationshowCopyright default: false default: false default: true default: true

## Default Configuration

board = JXG.JSXGraph.initBoard('box');
board.create('point',[0,0],{name:'origin'});
board.create('point',[-1,1],{name:'(-1,1)'});

The default values are to show only the copyright and navigation information; no axes.
It appears that the default coordinate set-up is:
var board = JXG.JSXGraph.initBoard('box',
{originX:150, originY:150, unitX:50, unitY:50});

This board is loaded into a 200 pixel by 200 pixel box with a border:
<div id="box" style="width:200px; height:200px; border:1px solid black;"></div>

The right navigation arrow allows you to see farther right in the coordinate plane;
the contents appear to move to the left.
Similarly, the up navigation arrow allows you to see farther up in the coordinate plane;
the contents appear to move down.

## Using a Bounding Box

board = JXG.JSXGraph.initBoard('box',
{boundingbox:[-20,10,10,-5],
axis:true,
grid:true,
});
board.create('point',[-10,5],{name:'(-10,5)'});

Using the  boundingbox  attribute gives a convenient alternative to
setting the coordinate system with  originX,  originY,  unitX, and  unitY.
You can completely ignore pixels.
If you want the visible $x$-axis to go from $\,a\,$ to $\,b\,$   ($\,a\lt b\,$)
and the visible $y$-axis to go from $\,c\,$ to $\,d\,$   ($\,c\lt d\,$),
then the upper left corner is $\,(a,d)\,$ and the lower right corner is $\,(b,c)\,$,
so you would use:
boundingbox:[a,d,b,c]

The grid is very light and difficult to see;
I'd like to figure out how to make it more prominent.

## Aspect Ratio

LEFT GRAPH:
board = JXG.JSXGraph.initBoard('box',
{boundingbox:[-2,1.5,2,-0.5],
board.create('functiongraph',
[function(x){return Math.sqrt(1 - x*x);},-2,2]);

RIGHT GRAPH:
board = JXG.JSXGraph.initBoard('box',
{boundingbox:[-2,1.5,2,-0.5],

Recall that $\,x^2 + y^2 = 1\,$ defines a circle, centered at $\,(0,0)\,$, with radius $\,1\,$.
Solving for $\,y\,$ and taking the positive solution yields the upper-half of this circle: $\,y = \sqrt{1 - x^2}\,$.
In the right graph,  keepaspectratio  has been set to ‘true’,