JSXGRAPH ATTRIBUTES

Click here for a complete discussion of JSXGraph Commands.
The JSXGraph Reference Card summarizes all these attributes of geometric elements.


Code structure sample:   board.create('point',[1,2],{attributeName1:value1, attributeName2:value2, ...});
attribute nameattribute valuedescription
strokeWidth number: 0,1,2,3,... Think of this as the thickness of the pencil (with color strokeColor) that creates the shape.
For points, the stroke is drawn centered about the circumference of the fill.
For circles, the stroke is drawn centered about the circumference of the circle.
Thus, for both points and circles, the stroke extends half its width outside the object, and half inside (the inside can get completely filled). This accounts for the ‘triple circle’ phenomenon (due to the overlapping of the inside stroke with the fill), easily seen in the circle examples below.
strokeColor a color string;
e.g., ‘blue’ or ‘#0000FF’		 Think of this as the color of the pencil (with thickness strokeWidth) that creates the shape.
strokeOpacity number in the interval $[0,1]$ Opacity is the degree to which light is not allowed to pass through an object;
an opacity of $1 = 100\%$ means that no light passes through
(hence an object beneath is completely obscured);
an opacity of $0$ means that all light passes through
(hence an object beneath is completely visible).
fillColor a color string;
e.g., ‘blue’ or ‘#0000FF’		 Think of this as the color of the pencil (with thickness strokeWidth) that creates the fill.
For a point, the fill is determined by the  size  attribute.
For a circle, the fill is the area inside the circle.
Lines do not have fill.
Note that strokes overlap into the fill (creating the ‘triple circle’ appearance until the stroke completely covers the fill).
fillOpacity number in the interval $[0,1]$ Similar to  strokeOpacity , except applied to the fill.
highlightStrokeColor a color string;
e.g., ‘blue’ or ‘#0000FF’		 An object is ‘highlighted’ when the cursor passes over it.
This is the color of the stroke when an object is highlighted.
highlightFillColor a color string;
e.g., ‘blue’ or ‘#0000FF’		 An object is ‘highlighted’ when the cursor passes over it.
This is the color of the fill when an object is highlighted.
highlightStrokeOpacity number in the interval $[0,1]$ This is the opacity of the stroke when it is in highlight mode;
i.e., when the cursor passes over it.
highlightFillOpacity number in the interval $[0,1]$ This is the opacity of the fill when it is in highlight mode;
i.e., when the cursor passes over it.
visible true, false default is true;
set  visible:false  to make an object invisible
trace true, false default is false;
with  trace:true , object leaves a trace of its movements in the JSXGraph board
draft true, false default is false;
an object with  draft:true  has a grey color which does not change when the cursor passes over it

POINTS ONLY:
face '[]', 'o', 'x', '+', '<', '>', 'A', 'v' default is  'o' ;
the symbol used to indicate a point
fixed true, false default is false;
with  fixed:true  the point cannot be moved
infoboxtext a string text that is displayed when the cursor passes over an object
labelColor a color string;
e.g., ‘blue’ or ‘#0000FF’		 specifies the color of text given in the  name  attribute.
name a string a label that moves with the point;
the default is to automatically use unique capital letter names (A, B, C, etc.);
set  name:''  if no label is desired
size number: 0,1,2,3,... the size of the fill for a point;
the stroke is drawn centered on the fill circumference

LINES ONLY:
dash number: 0,1,2,3,4,5,6 default is 0 (a solid line);
others values give a variety of dash patterns (see samples below)
straightFirst true, false default is true; suppose $\,A\,$ and $\,B\,$ are on a number line, with $\,A\lt B\,$;
straightFirst:false  eliminates the part of the line $\,\overleftrightarrow{AB}\,$ from $\,-\infty\,$ to $\,A$
straightLast true, false default is true; suppose $\,A\,$ and $\,B\,$ are on a number line, with $\,A\lt B\,$;
straightLast:false  eliminates the part of the line $\,\overleftrightarrow{AB}\,$ from $\,B\,$ to $\,\infty$
firstArrow true, false default is false; suppose $\,A\,$ and $\,B\,$ are on a number line, with $\,A\lt B\,$;
firstArrow:true  puts an arrow on the ‘$A$’ side of the line $\,\overleftrightarrow{AB}\,$
lastArrow true, false default is false; suppose $\,A\,$ and $\,B\,$ are on a number line, with $\,A\lt B\,$;
lastArrow:true  puts an arrow on the ‘$B$’ side of the line $\,\overleftrightarrow{AB}\,$

The following examples allow you to play with different combinations of the generic attributes,
and see the results on a point, a line, and a circle.

The buttons to change colors are not part of the JSXGraph board;
they appear before the div that holds the JSXGraph board;
they are achieved with code similar to this: 

<button type="button" 
  onclick="GVcolCtr++; board.update();
  document.getElementById('strokeColorSpan').innerHTML = colorMatrix[GVcolCtr%8]; ">
change strokeColor
</button>
<span id="strokeColorSpan">red</span>
Note that   GVcolCtr%8   uses the modulus operator   %  ,
and gives the remainder upon division by $\,8\,$; thus, it cycles between $\,0\,$ and $\,7\,.$

POINT ATTRIBUTES:

Here is the JSXGraph board code (loaded into a box that is 900 pixels high and 300 pixels wide): 
GVcolCtr = 0; // global variable, keeps track of strokeColor
GVcolCtr2 = 0; // global variable, keeps track of color fillColor
GVcolCtr3 = 1; // global variable, keeps track of highlightStrokeColor
GVcolCtr4 = 1; // global variable, keeps track of highlightFillColor

colorMatrix = ["red","green","blue","orange","purple","yellow","black","white"];

board = JXG.JSXGraph.initBoard('box',
  {originX:150, originY:600, unitX:20, unitY:20,
  showNavigation:false, showCopyright:false});
swSlider = board.create('slider',[[-7,29],[0,29],[0,10,100]],
  {name:'&nbsp; strokeWidth',snapWidth:1});
soSlider = board.create('slider',[[-7,27.5],[0,27.5],[0,.5,1]],
  {name:'&nbsp; strokeOpacity',snapWidth:.05});
foSlider = board.create('slider',[[-7,26],[0,26],[0,.5,1]],
  {name:'&nbsp; fillOpacity',snapWidth:.05});
hsoSlider = board.create('slider',[[-7,24],[0,24],[0,.5,1]],
  {name:'&nbsp; highlightStrokeOpacity<br />',snapWidth:.05});
hfoSlider = board.create('slider',[[-7,22],[0,22],[0,.5,1]],
  {name:'&nbsp; highlightFillOpacity<br />',snapWidth:.05});
  
board.create('text',[-7,20,'change the attributes<br />
of the point at right<br />
by using<br />the buttons<br />and sliders above']);

thePt = board.create('point',[4,18],{name:'name',
  size: 10,
  infoboxtext:'infoboxtext',
  strokeColor: function(){return colorMatrix[GVcolCtr%8]},
  fillColor: function(){return colorMatrix[GVcolCtr2%8]},
  strokeWidth: function(){return swSlider.Value()},
  strokeOpacity: function(){return soSlider.Value()},
  fillOpacity: function(){return foSlider.Value()},
  highlightStrokeColor: function(){return colorMatrix[GVcolCtr3%8]},
  highlightFillColor: function(){return colorMatrix[GVcolCtr4%8]},
  highlightStrokeOpacity: function(){return hsoSlider.Value()},
  highlightFillOpacity: function(){return hfoSlider.Value()}
});
The code to display the point sizes and faces is not shown here;
view the source code for this page, if desired.
red
red
 
green
green


LINE ATTRIBUTES:

Recall that a line has no  fill;
hence no  fillColor,  fillOpacity,  highlightFillColor  or  highlightFillOpacity.

Here is the JSXGraph board code (loaded into a box that is 1100 pixels high and 300 pixels wide): 
GVcolCtr = 0; // global variable, keeps track of strokeColor
GVcolCtr2 = 1; // global variable, keeps track of highlightStrokeColor

colorMatrix = ["red","green","blue","orange","purple","yellow","black","white"];

board = JXG.JSXGraph.initBoard('box',
  {originX:150, originY:600, unitX:20, unitY:20,
  showNavigation:false, showCopyright:false});

swSlider = board.create('slider',[[-7,29],[0,29],[0,10,100]],
  {name:'&nbsp; strokeWidth',snapWidth:1});
soSlider = board.create('slider',[[-7,27],[0,27],[0,.5,1]],
  {name:'&nbsp; strokeOpacity',snapWidth:.05});
hsoSlider = board.create('slider',[[-7,25],[0,25],[0,.5,1]],
  {name:'&nbsp; highlightStrokeOpacity<br />',snapWidth:.05});

board.create('text',[-7,22,'Change the attributes of the line below<br />
  by using the buttons and sliders above:']);

theLine = board.create('line',[[4,18],[5,18]],{
  strokeColor: function(){return colorMatrix[GVcolCtr%8]},
  strokeWidth: function(){return swSlider.Value()},
  strokeOpacity: function(){return soSlider.Value()},
  highlightStrokeColor: function(){return colorMatrix[GVcolCtr2%8]},
  highlightStrokeOpacity: function(){return hsoSlider.Value()}
});
The code to display additional line attributes is not shown here;
view the source code for this page, if desired.
red
green


CIRCLE ATTRIBUTES:

Here is the JSXGraph board code (loaded into a box that is 600 pixels high and 300 pixels wide): 
GVcolCtr = 0; // global variable, keeps track of strokeColor
GVcolCtr2 = 0; // global variable, keeps track of color fillColor
GVcolCtr3 = 1; // global variable, keeps track of highlightStrokeColor
GVcolCtr4 = 1; // global variable, keeps track of highlightFillColor

colorMatrix = ["red","green","blue","orange","purple","yellow","black","white"];

board = JXG.JSXGraph.initBoard('box',
  {originX:150, originY:650, unitX:20, unitY:20,
  showNavigation:false, showCopyright:false});

raSlider = board.create('slider',[[-7,30.5],[0,30.5],[0,2,5]],
  {name:'&nbsp; radius',snapWidth:0.1});
swSlider = board.create('slider',[[-7,29],[0,29],[0,10,100]],
  {name:'&nbsp; strokeWidth',snapWidth:1});
soSlider = board.create('slider',[[-7,27.5],[0,27.5],[0,.5,1]],
  {name:'&nbsp; strokeOpacity',snapWidth:.05});
foSlider = board.create('slider',[[-7,26],[0,26],[0,.5,1]],
  {name:'&nbsp; fillOpacity',snapWidth:.05});
hsoSlider = board.create('slider',[[-7,24],[0,24],[0,.5,1]],
  {name:'&nbsp; highlightStrokeOpacity
',snapWidth:.05});
hfoSlider = board.create('slider',[[-7,22],[0,22],[0,.5,1]],
  {name:'&nbsp; highlightFillOpacity
',snapWidth:.05});

board.create('text',[-7,20,'change the attributes<br />
  of the circle at right<br />by using<br />the buttons<br />
  and sliders above']);

cPt1 = board.create('point',[4,18],{name:'',face:'x'});
cPt2 = board.create('point',
 [function(){return cPt1.X()+raSlider.Value()},18],{name:'',face:'x'});
theCircle = board.create('circle',[cPt1,cPt2],{
  strokeColor: function(){return colorMatrix[GVcolCtr%8]},
  fillColor: function(){return colorMatrix[GVcolCtr2%8]},
  strokeWidth: function(){return swSlider.Value()},
  strokeOpacity: function(){return soSlider.Value()},
  fillOpacity: function(){return foSlider.Value()},
  highlightStrokeColor: function(){return colorMatrix[GVcolCtr3%8]},
  highlightFillColor: function(){return colorMatrix[GVcolCtr4%8]},
  highlightStrokeOpacity: function(){return hsoSlider.Value()},
  highlightFillOpacity: function(){return hfoSlider.Value()}
});

board.create('text',[-7,13,'circle with trace set to true;<br />change it']);
circPt1 = boardGeneric3.create('point',[3,13],{name:''});
circPt2 = boardGeneric3.create('point',[4,13],{name:''});
board.create('circle',[circPt1,circPt2],{trace:true});

board.create('text',[-7,9,'circle with draft set to true:']);
board.create('circle',[[3,9],[4,9]],{draft:true});
red
red
 
green
green