# JSXGraph 1.11.1 Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

- Angle
- Arc
- Arrow
- Arrowparallel
- Axes3D
- Axis
- Axis3D
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circle3D
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- Face3D
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- IntersectionCircle3D
- IntersectionLine3D
- Label
- Legend
- Line
- Line3D
- MajorArc
- MajorSector
- Measurement
- Mesh3D
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- MirrorElement
- MirrorPoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Plane3D
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- Polygon3D
- PolygonalChain
- Polyhedron3D
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Sphere3D
- Spline
- Stepfunction
- Tangent
- TangentTo
- Tapemeasure
- Text
- Text3D
- Ticks
- Ticks3D
- Tracecurve
- Transformation
- Transformation3D
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

Classes

- _global_
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Circle3D
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.Face3D
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.Polygon3D
- JXG.PrefixParser
- JXG.Sphere3D
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Text3D
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML

# Element Line

JXG.GeometryElement
↳ JXG.Line
↳ Line

A general line is given by two points or three coordinates. By setting additional properties a line can be used as an arrow and/or axis.
Defined in: line.js.
Extends JXG.Line.

Element Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Line

Attributes Summary
Field Attributes | Field Name and Description
--- | ---

firstArrow
Configure the arrow head at the position of its first point or the corresponding intersection with the canvas border The attribute firstArrow can be a Boolean or an object with the following sub-attributes:

    {
         type: 1, // possible values are 1, 2, .

| label Attributes for the line label.
| lastArrow Configure the arrow head at the position of its second point or the corresponding intersection with the canvas border.
| margin This number (pixel value) controls where infinite lines end at the canvas border.
| point1 Attributes for first defining point of the line.
| point2 Attributes for second defining point of the line.
| snapSizeX Defines together with Point#snapSizeY the grid the point snaps on to.
| snapSizeY Defines together with Point#snapSizeX the grid the point snaps on to.
| snapToGrid If set to true, the point will snap to a grid defined by Point#snapSizeX and Point#snapSizeY.
| straightFirst If true, line stretches infinitely in direction of its first point.
| straightLast If true, line stretches infinitely in direction of its second point.
| ticks Attributes for ticks of the line.
| touchFirstPoint If set to true, Line#firstArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
| touchLastPoint If set to true, Line#lastArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.

Methods borrowed from class JXG.Line:
  addTransform, Direction, getAngle, getRise, getSlope, hasPoint, isHorizontal, isVertical, L, maxX, minX, setFixedLength, setLabelRelativeCoords, setStraight, Slope, updateRenderer, updateSegmentFixedLength, updateStdform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility, useLocale

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Element Detail
Line

This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "line".
Possible parent array combinations are:
{JXG.Point|array|function} point1
{JXG.Point|array|function} point2
  Parent elements can be two elements either of type JXG.Point or array of numbers describing the coordinates of a point. In the latter case the point will be constructed automatically as a fixed invisible point. It is possible to provide a function returning an array or a point, instead of providing an array or a point.
{Number|function} a
{Number|function} b
{Number|function} c
  A line can also be created providing three numbers. The line is then described by the set of solutions of the equation `a*z+b*x+c*y = 0`. For all finite points, z is normalized to the value 1. It is possible to provide three functions returning numbers, too.
{function} f
  This function must return an array containing three numbers forming the line's homogeneous coordinates.

  Additionally, a line can be created by providing a line and a transformation (or an array of transformations). Then, the result is a line which is the transformation of the supplied line.

Throws:
{Exception}
  If the element cannot be constructed with the given parent objects an exception is thrown.

Examples:

    // Create a line using point and coordinates/
    // The second point will be fixed and invisible.
    var p1 = board.create('point', [4.5, 2.0]);
    var l1 = board.create('line', [p1, [1.0, 1.0]]);

    // Create a line using three coordinates
    var l1 = board.create('line', [1.0, -2.0, 3.0]);

            // Create a line (l2) as reflection of another line (l1)
            // reflection line
            var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
            var reflect = board.create('transform', [li], {type: 'reflect'});

            var l1 = board.create('line', [1,-5,1]);
            var l2 = board.create('line', [l1, reflect]);

    var t = board.create('transform', [2, 1.5], {type: 'scale'});
    var l1 = board.create('line', [1, -5, 1]);
    var l2 = board.create('line', [l1, t]);

    //create line between two points
    var p1 = board.create('point', [0,0]);
    var p2 = board.create('point', [2,2]);
    var l1 = board.create('line', [p1,p2], {straightFirst:false, straightLast:false});

Attribute Detail
{Boolean | Object} firstArrow
Configure the arrow head at the position of its first point or the corresponding intersection with the canvas border The attribute firstArrow can be a Boolean or an object with the following sub-attributes:

    {
         type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
         size: 6, // size of the arrow head. Default value is 6.
                  // This value is multiplied with the strokeWidth of the line
                  // Exception: for type=7 size is ignored
         highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value
    }

type=7 is the default for curves if firstArrow: true

An arrow head can be turned off with line.setAttribute({firstArrow: false}).
Defined in: options.js.

        board.options.line.lastArrow = false;
        board.options.line.firstArrow = {size: 10, highlightSize: 10};
        board.options.line.point1 = {visible: false, withLabel: true, label: {visible: true, anchorX: 'right'}};
        board.options.line.strokeWidth = 4;
        board.options.line.highlightStrokeWidth = 4;

        board.create('segment', [[-5,4], [3,4]], {firstArrow: {type: 1}, point1: {name: 'type:1'}});
        board.create('segment', [[-5,3], [3,3]], {firstArrow: {type: 2}, point1: {name: 'type:2'}});
        board.create('segment', [[-5,2], [3,2]], {firstArrow: {type: 3}, point1: {name: 'type:3'}});
        board.create('segment', [[-5,1], [3,1]], {firstArrow: {type: 4}, point1: {name: 'type:4'}});
        board.create('segment', [[-5,0], [3,0]], {firstArrow: {type: 5}, point1: {name: 'type:5'}});
        board.create('segment', [[-5,-1], [3,-1]], {firstArrow: {type: 6}, point1: {name: 'type:6'}});
        board.create('segment', [[-5,-2], [3,-2]], {firstArrow: {type: 7}, point1: {name: 'type:7'}});

See:
  Line#lastArrow
  Line#touchFirstPoint

Default Value:
  false

{Object} label
Attributes for the line label.
Defined in: options.js.

See:
  Label

{Boolean | Object} lastArrow
Configure the arrow head at the position of its second point or the corresponding intersection with the canvas border. The attribute lastArrow can be a Boolean or an object with the following sub-attributes:

    {
         type: 1, // possible values are 1, 2, ..., 7. Default value is 1.
         size: 6, // size of the arrow head. Default value is 6.
                  // This value is multiplied with the strokeWidth of the line.
                  // Exception: for type=7 size is ignored
         highlightSize: 6, // size of the arrow head in case the element is highlighted. Default value is 6.
    }

type=7 is the default for curves if lastArrow: true

An arrow head can be turned off with line.setAttribute({lastArrow: false}).
Defined in: options.js.

        var p1 = board.create('point', [-5, 2], {size:1});
        var p2 = board.create('point', [5, 2], {size:10});
        var li = board.create('segment', ['A','B'],
            {name:'seg',
             strokeColor:'#000000',
             strokeWidth:1,
             highlightStrokeWidth: 5,
             lastArrow: {type: 2, size: 8, highlightSize: 6},
             touchLastPoint: true,
             firstArrow: {type: 3, size: 8}
            });

        board.options.line.strokeWidth = 4;
        board.options.line.highlightStrokeWidth = 4;
        board.options.line.firstArrow = false;
        board.options.line.lastArrow = {size: 10, highlightSize: 10};
        board.options.line.point2 = {visible: false, withLabel: true, label: {visible: true}};

        board.create('segment', [[-5,4], [3,4]], {lastArrow: {type: 1}, point2: {name: 'type:1'}});
        board.create('segment', [[-5,3], [3,3]], {lastArrow: {type: 2}, point2: {name: 'type:2'}});
        board.create('segment', [[-5,2], [3,2]], {lastArrow: {type: 3}, point2: {name: 'type:3'}});
        board.create('segment', [[-5,1], [3,1]], {lastArrow: {type: 4}, point2: {name: 'type:4'}});
        board.create('segment', [[-5,0], [3,0]], {lastArrow: {type: 5}, point2: {name: 'type:5'}});
        board.create('segment', [[-5,-1], [3,-1]], {lastArrow: {type: 6}, point2: {name: 'type:6'}});
        board.create('segment', [[-5,-2], [3,-2]], {lastArrow: {type: 7}, point2: {name: 'type:7'}});

See:
  Line#firstArrow
  Line#touchLastPoint

Default Value:
  false

{Number} margin
This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line ends exactly at the border, if negative there is a margin to the inside, if positive the line ends outside of the canvas (which is invisible).
Defined in: options.js.

Default Value:
  0

{Point} point1
Attributes for first defining point of the line.
Defined in: options.js.

{Point} point2
Attributes for second defining point of the line.
Defined in: options.js.

{Number} snapSizeX
Defines together with Point#snapSizeY the grid the point snaps on to. The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than `0`, it will use the grid displayed by the major ticks of the default ticks of the default x axes of the board.
Defined in: options.js.

See:
  Point#snapToGrid
  Point#snapSizeY
  JXG.Board#defaultAxes

Default Value:
  1

{Number} snapSizeY
Defines together with Point#snapSizeX the grid the point snaps on to. The point will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than `0`, it will use the grid displayed by the major ticks of the default ticks of the default y axes of the board.
Defined in: options.js.

See:
  Point#snapToGrid
  Point#snapSizeX
  JXG.Board#defaultAxes

Default Value:
  1

{Boolean} snapToGrid
If set to true, the point will snap to a grid defined by Point#snapSizeX and Point#snapSizeY.
Defined in: options.js.

See:
  Point#snapSizeX
  Point#snapSizeY

Default Value:
  false

{Boolean} straightFirst
If true, line stretches infinitely in direction of its first point. Otherwise it ends at point1.
Defined in: options.js.

See:
  Line#straightLast

Default Value:
  true

{Boolean} straightLast
If true, line stretches infinitely in direction of its second point. Otherwise it ends at point2.
Defined in: options.js.

See:
  Line#straightFirst

Default Value:
  true

{Object} ticks
Attributes for ticks of the line.
Defined in: options.js.

See:
  Ticks

{Boolean} touchFirstPoint
If set to true, Line#firstArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
Defined in: options.js.

See:
  Line#firstArrow

Default Value:
  false

{Boolean} touchLastPoint
If set to true, Line#lastArrow is set to true and the point is visible, the arrow head will just touch the circle line of the start point of the line.
Defined in: options.js.

See:
  Line#firstArrow

Default Value:
  false

Attributes borrowed from other Elements

Attributes borrowed from class JXG.GeometryElement:
  aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel

Fields borrowed from other Elements

Fields borrowed from class JXG.Line:
  defaultTicks, parentPolygon
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc

Methods borrowed from other Elements

Methods borrowed from class JXG.Line:
  addTransform, Direction, getAngle, getRise, getSlope, hasPoint, isHorizontal, isVertical, L, maxX, minX, setFixedLength, setLabelRelativeCoords, setStraight, Slope, updateRenderer, updateSegmentFixedLength, updateStdform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility, useLocale

Events borrowed from other Elements

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Apr 04 2025 09:22:41 GMT+0200 (Mitteleuropäische Sommerzeit)