JSXGraph Board Attributes

Click here for a complete discussion of JSXGraph Commands.

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 nameattribute valuedescription
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
axis
grid
showNavigation
showCopyright		 default: false
default: false
default: true
default: true

EXAMPLES:

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,
   showNavigation:false,
   showCopyright:false
  });
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],
  axis:true,showNavigation:false,showCopyright:false});
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],
  axis:true,showNavigation:false,showCopyright:false,
  keepaspectratio:true});
board.create('functiongraph',
  [function(x){return Math.sqrt(1 - x*x);},-2,2]);
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 left graph, the upper-half-circle doesn't look like a circle,
since the units on the horizontal and vertical axes are different.

In the right graph,  keepaspectratio  has been set to ‘true’,
causing the vertical axis to be adjusted to make the units equal.