Line

Construction of a line

A line needs two points. Lets construct two points "A" and "B".

var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[-1,1], {name:'A',size:4});
var p2 = b.create('point',[2,-1], {name:'B',size:4});

Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.

var li = b.create('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another variation, we use a dashed line style.

var li2 = b.create('line',[p1,p2], 
 {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});

"Line" also accepts point coordinates as input, so you can create a line without having to declare the points separately.

var li3 = b3.create('line',[[-1,1],[2,-1]], {straightFirst:false, straightLast:false, strokeWidth:2});

Here are some of the options that can be used with lines. A complete list can be found on our Line reference page.

Attribute	Type	Effect
strokeColor	HTML colorstring	Colors the line in the color specified.
highlightStrokeColor	HTML colorstring	Colors the line, when moused over, in the color specified. If same as strokeColor , removes highlighting.
strokeColorOpacity	float	Colors the line with the given opacity. Must be between 0 and 1. 0: Line is fully transparent. 1: Line is not transparent.
highlightStrokeColorOpacity	float	Colors the line, when moused over, with the given opacity. Must be between 0 and 1. 0: Line is fully transparent. 1: Line is not transparent.
dash	int	Creates a dashed line. Value must be between 0 and 6. 0: solid line 1: dotted line 2: line with small dashes 3: line with normal dashes 4: line with long dashes 5: line with alternating medium and big dashes and large gaps 6: line with alternating medium and big dashes and small gaps
strokeWidth	int	Determines the thickness of the line
straightFirst	bool	Determines whether the line is drawn beyond the first defining point.
straightLast	bool	Determines whether the line is drawn beyond the second defining point.
firstArrow	bool	Determines whether the line has an arrow at the first defining point.
lastArrow	bool	Determines whether the line has an arrow at the second defining point.
trace	bool	Determines whether the line is traced.
shadow	bool	Determines whether the line has a shadow.
visible	bool	Determines whether the line is shown.