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

JXG.Group
↳ Group

A container element to control the movement of given set of point, image or text elements simultaneously. The elements of the group and dependent elements can be translated, rotated and scaled by dragging one of the group elements.
Defined in: group.js.
Extends JXG.Group.

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

Methods borrowed from class JXG.Group:
  _addActionPoint, _removeActionPoint, _setActionPoints, _update_apply_transformation, _update_centroid_center, _update_find_drag_type, _updateCoordsCache, addGroup, addParents, addPoint, addPoints, addRotationPoint, addScalePoint, addTranslationPoint, getParents, removePoint, removeRotationPoint, removeScalePoint, removeTranslationPoint, setParents, setProperty, setRotationCenter, setRotationPoints, setScaleCenter, setScalePoints, setTranslationPoints, ungroup, update

Element Detail
Group

This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "group".
Possible parent array combinations are:
{JXG.Board} board
  The board the points are on.
{Array} parents
  Array of points to group.
{Object} attributes
  Visual properties (unused).

Returns:
  {JXG.Group}

Examples:

     // Create some free points. e.g. A, B, C, D
     // Create a group

     var p, col, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
     g = board.create('group', p);

     // Create some free points. e.g. A, B, C, D
     // Create a group
     // If the points define a polygon and the polygon has the attribute hasInnerPoints:true,
     // the polygon can be dragged around.

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p);

     // Allow rotations:
     // Define a center of rotation and declare points of the group as "rotation points".

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p);
     g.setRotationCenter(p[0]);
     g.setRotationPoints([p[1], p[2]]);

     // Allow rotations:
     // As rotation center, arbitrary points, coordinate arrays,
     // or functions returning coordinate arrays can be given.
     // Another possibility is to use the predefined string 'centroid'.

     // The methods to define the rotation points can be chained.

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[1], p[2]]);

     // Allow scaling:
     // As for rotation one can declare points of the group to trigger a scaling operation.
     // For this, one has to define a scaleCenter, in analogy to rotations.

     // Here, the yellow  point enables scaling, the red point a rotation.

     var p, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[2]]);
     g.setScaleCenter(p[0]).setScalePoints(p[1]);

     // Allow Translations:
     // By default, every point of a group triggers a translation.
     // There may be situations, when this is not wanted.

     // In this example, E triggers nothing, but itself is rotation center
     // and is translated, if other points are moved around.

     var p, q, col, pol, g;
     col = 'blue';
     p = [];
     p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
     p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
     p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
     p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
     q = board.create('point',[0, 0], {size: 5, strokeColor:col, fillColor:col});

     pol = board.create('polygon', p, {hasInnerPoints: true});
     g = board.create('group', p.concat(q)).setRotationCenter('centroid').setRotationPoints([p[2]]);
     g.setScaleCenter(p[0]).setScalePoints(p[1]);
     g.removeTranslationPoint(q);

           // Add an image and use the group tools to manipulate it
          let urlImg = "https://jsxgraph.org/distrib/images/uccellino.jpg";
          let lowleft = [-2, -1]

          let col = 'blue';
          let p = [];
          p.push(board.create('point', lowleft, { size: 5, strokeColor: col, fillColor: col }));
          p.push(board.create('point', [2, -1], { size: 5, strokeColor: 'yellow', fillColor: 'yellow', name: 'scale' }));
          p.push(board.create('point', [2, 1], { size: 5, strokeColor: 'red', fillColor: 'red', name: 'rotate' }));
          p.push(board.create('point', [-2, 1], { size: 5, strokeColor: col, fillColor: col, name: 'translate' }));

          let im = board.create('image', [urlImg, lowleft, [2, 2]]);
          let pol = board.create('polygon', p, { hasInnerPoints: true });

          let g = board.create('group', p.concat(im))
          // g.addPoint(im)   // image, but adds as a point

          g.setRotationCenter(lowleft)
          g.setRotationPoints([p[2]]);

          g.setScaleCenter(p[0]).setScalePoints(p[1]);

Attributes borrowed from other Elements

Fields borrowed from other Elements

Fields borrowed from class JXG.Group:
  coords

Methods borrowed from other Elements

Methods borrowed from class JXG.Group:
  _addActionPoint, _removeActionPoint, _setActionPoints, _update_apply_transformation, _update_centroid_center, _update_find_drag_type, _updateCoordsCache, addGroup, addParents, addPoint, addPoints, addRotationPoint, addScalePoint, addTranslationPoint, getParents, removePoint, removeRotationPoint, removeScalePoint, removeTranslationPoint, setParents, setProperty, setRotationCenter, setRotationPoints, setScaleCenter, setScalePoints, setTranslationPoints, ungroup, update

Events borrowed from other Elements

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