# 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 Angle

JXG.GeometryElement
↳ JXG.Curve
↳ Sector
↳ Angle

Angle sector defined by three points or two lines. Visually it is just a Sector element with a radius not defined by the parent elements but by an attribute `radius`. As opposed to the sector, an angle has two angle points and no radius point. Sector is displayed if type=="sector". If type=="square", instead of a sector a parallelogram is displayed. In case of type=="auto", a square is displayed if the angle is near orthogonal. The precision to decide if an angle is orthogonal is determined by the attribute Angle#orthoSensitivity.

If no name is provided the angle label is automatically set to a lower greek letter. If no label should be displayed use the attribute `withLabel:false` or set the name attribute to the empty string.
Defined in: sector.js.
Extends Sector.

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

Attributes Summary
Field Attributes | Field Name and Description
--- | ---
| arc Attributes for sub-element arc.
| dot Attributes of the dot point marking right angles.
| orthoSensitivity Sensitivity (in degrees) to declare an angle as right angle.
| orthoType Display type of the angle field in case of a right angle.
| pointsquare
| radius Radius of the sector, displaying the angle.
| radiuspoint
| type Display type of the angle field.

Field Summary
Field Attributes | Field Name and Description
--- | ---
| point The point defining the radius of the angle element.

Method Summary
Method Attributes | Method Name and Description
--- | ---
| free() Frees an angle from a prescribed value.
| setAngle(val) Set an angle to a prescribed value given in radians.
| Value(unit) Returns the value of the angle.

Methods borrowed from class Sector:
  Area, autoRadius, hasPointSector, L, Perimeter, Radius, setPositionDirectly, setRadius
Methods borrowed from class JXG.Curve:
  addTransform, allocatePoints, generateTerm, getLabelPosition, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, 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, setProperty, show, showElement, snapToPoints, 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
Angle

This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "angle".
Possible parent array combinations are:
{JXG.Point} p1
{JXG.Point} p2
{JXG.Point} p1
  An angle is always drawn counterclockwise from `p1` to `p3` around `p2`. Second possibility of input parameters are:
  line2, coords1 or direction1, coords2 or direction2, radius The angle is defined by two lines. The two legs which define the angle are given by two coordinate arrays. The points given by these coordinate arrays are projected initially (i.e. only once) onto the two lines. The other possibility is to supply directions (+/- 1).

Throws:
{Error}
  If the element cannot be constructed with the given parent objects an exception is thrown. First possibility of input parameters are:

Examples:

    // Create an angle out of three free points
    var p1 = board.create('point', [5.0, 3.0]),
        p2 = board.create('point', [1.0, 0.5]),
        p3 = board.create('point', [1.5, 5.0]),

        a = board.create('angle', [p1, p2, p3]),
        t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]);

    // Create an angle out of two lines and two directions
    var p1 = board.create('point', [-1, 4]),
     p2 = board.create('point', [4, 1]),
     q1 = board.create('point', [-2, -3]),
     q2 = board.create('point', [4,3]),

     li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
     li2 = board.create('line', [q1,q2], {lastArrow:true}),

     a1 = board.create('angle', [li1, li2, [5.5, 0], [4, 3]], { radius:1 }),
     a2 = board.create('angle', [li1, li2, 1, -1], { radius:2 });

    // Display the angle value instead of the name
    var p1 = board.create('point', [0,2]);
    var p2 = board.create('point', [0,0]);
    var p3 = board.create('point', [-2,0.2]);

    var a = board.create('angle', [p1, p2, p3], {
    	 radius: 1,
      name: function() {
      	return JXG.Math.Geometry.trueAngle(p1, p2, p3).toFixed(1) + '°';
      }});

    // Apply a transformation to an angle.
    var t = board.create('transform', [2, 1.5], {type: 'scale'});
    var an1 = board.create('angle', [[-4,3.9], [-3, 4], [-3, 3]]);
    var an2 = board.create('curve', [an1, t]);

Attribute Detail
{Arc} arc
Attributes for sub-element arc. In general, the arc will run through the first point and thus will not have the same radius as the angle sector.
Defined in: options.js.

Default Value:
  '{visible:false}'

{Object} dot
Attributes of the dot point marking right angles.
Defined in: options.js.

Default Value:
  `{face: 'o', size: 2}`

{Number} orthoSensitivity
Sensitivity (in degrees) to declare an angle as right angle. If the angle measure is inside this distance from a rigth angle, the orthoType of the angle is used for display.
Defined in: options.js.

See:
  Angle#orthoType

Default Value:
  1.0

{String} orthoType
Display type of the angle field in case of a right angle. Possible values are 'sector' or 'sectordot' or 'square' or 'none'.
Defined in: options.js.

See:
  Angle#orthoSensitivity

Default Value:
  square

{Object} pointsquare
Defined in: options.js.

radius
Radius of the sector, displaying the angle. The radius can be given as number (in user coordinates) or as string 'auto'. In the latter case, the angle is set to an value between 20 and 50 px.
Defined in: options.js.

Default Value:
  'auto'

{Object} radiuspoint
Defined in: options.js.

{String} type
Display type of the angle field. Possible values are 'sector' or 'sectordot' or 'square' or 'none'.
Defined in: options.js.

Default Value:
  'sector'

Field Detail
{JXG.Point} point
The point defining the radius of the angle element. Alias for Sector#radiuspoint.
Method Detail
{Object} free()
Frees an angle from a prescribed value. This is only relevant if the angle size has been set by "setAngle()" previously. The anglepoint is set to a free point.

Returns:
  {Object} Pointer to the angle element..

See:
  Angle#setAngle

{Object} setAngle(val)
Set an angle to a prescribed value given in radians. This is only possible if the third point of the angle, i.e. the anglepoint is a free point. Removing the constraint again is done by calling "angle.free()". Changing the angle requires to call the method "free()":

    angle.setAngle(Math.PI / 6);
    // ...
    angle.free().setAngle(Math.PI / 4);

Parameters:
{Number|Function} val
  Number or Function which returns the size of the angle in Radians

Returns:
  {Object} Pointer to the angle element..

See:
  Angle#free

Examples:

    var p1, p2, p3, c, a, s;

    p1 = board.create('point',[0,0]);
    p2 = board.create('point',[5,0]);
    p3 = board.create('point',[0,5]);

    c1 = board.create('circle',[p1, p2]);

    a = board.create('angle',[p2, p1, p3], {radius:3});

    a.setAngle(function() {
        return Math.PI / 3;
    });
    board.update();

    var p1, p2, p3, c, a, s;

    p1 = board.create('point',[0,0]);
    p2 = board.create('point',[5,0]);
    p3 = board.create('point',[0,5]);

    c1 = board.create('circle',[p1, p2]);

    a = board.create('angle',[p2, p1, p3], {radius:3});
    s = board.create('slider',[[-2,1], [2,1], [0, Math.PI*0.5, 2*Math.PI]]);

    a.setAngle(function() {
        return s.Value();
    });
    board.update();

{Number} Value(unit)
Returns the value of the angle.

Parameters:
{String} unit Optional, Default: 'length'
  Unit of the returned values. Possible units are
  - 'radians' (default): angle value in radians
  - 'degrees': angle value in degrees
  - 'semicircle': angle value in radians as a multiple of π, e.g. if the angle is 1.5π, 1.5 will be returned.
  - 'circle': angle value in radians as a multiple of 2π
  - 'length': length of the arc line of the angle
  It is sufficient to supply the first three characters of the unit, e.g. 'len'.

Returns:
  {Number} angle value in various units.

See:
  Sector#L
  Arc#Value

Examples:

    var A, B, C, ang,
        r = 0.5;
    A = board.create("point", [3, 0]);
    B = board.create("point", [0, 0]);
    C = board.create("point", [2, 2]);
    ang = board.create("angle", [A, B, C], {radius: r});

    console.log(ang.Value());
    // Output Math.PI * 0.25

    console.log(ang.Value('radian'));
    // Output Math.PI * 0.25

    console.log(ang.Value('degree');
    // Output 45

    console.log(ang.Value('semicircle'));
    // Output 0.25

    console.log(ang.Value('circle'));
    // Output 0.125

    console.log(ang.Value('length'));
    // Output r * Math.PI * 0.25

    console.log(ang.L());
    // Output r * Math.PI * 0.25

Attributes borrowed from other Elements

Attributes borrowed from class Sector:
  anglePoint, center, label, radiusPoint, selection
Attributes borrowed from class JXG.Curve:
  lineCap
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, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel

Fields borrowed from other Elements

Fields borrowed from class Sector:
  point1, point2, point3, point4
Fields borrowed from class JXG.Curve:
  dataX, dataY, numberPoints, qdt, ticks
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, visProp, visPropCalc

Methods borrowed from other Elements

Methods borrowed from class Sector:
  Area, autoRadius, hasPointSector, L, Perimeter, Radius, setPositionDirectly, setRadius
Methods borrowed from class JXG.Curve:
  addTransform, allocatePoints, generateTerm, getLabelPosition, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, 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, setProperty, show, showElement, snapToPoints, 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:39 GMT+0200 (Mitteleuropäische Sommerzeit)