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

JXG.GeometryElement
↳ JXG.Curve
↳ Grid

A grid is a mesh consisting of vertical and horizontal lines or other geometrical objects.
Defined in: grid.js.
Extends JXG.Curve.

Element Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Grid A grid is a set of vertical and horizontal lines or other geometrical objects (faces) to support the user with element placement or to improve determination of position.

Attributes Summary
Field Attributes | Field Name and Description
--- | ---
| drawZero This attribute determines whether the grid elements located at `x=0`, `y=0` and (for major grid only) at `(0, 0)` are displayed.
| face Appearance of grid elements.
| forceSquare To print a quadratic grid with same distance of major grid elements in x- and y-direction.
| gridX Deprecated.
| gridY Deprecated.
| includeBoundaries To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
| major This object contains the attributes for major grid elements.
| majorStep Distance of major grid elements.
| margin This number (pixel value) controls where grid elements end at the canvas edge.
| minor This object contains the attributes for minor grid elements.
| minorElements Number of elements in minor grid between elements of the major grid.
| polygonVertices Number of vertices for face 'polygon'.
| size Size of grid elements.
<private> | themes Array of theme attributes.

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, setPositionDirectly, 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
Grid
A grid is a set of vertical and horizontal lines or other geometrical objects (faces) to support the user with element placement or to improve determination of position. This method takes up to two facultative parent elements. These are used to set distance between grid elements in case of attribute `majorStep` or `minorElements` is set to 'auto'. Then the major/minor grid element distance is set to the ticks distance of parent axes. It is usually instantiated on the board's creation via the attribute `grid` set to true.

This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "grid".
Possible parent array combinations are:
{JXG.Axis} a1
{JXG.Axis} a2
  Optional parent axis.

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

Examples:

    // standard grid
    var g = board.create('grid', [], {});

    // more fancy grid
    var g = board.create('grid', [], {
        major: {
            face: 'plus',
            size: 7,
            strokeColor: 'green',
            strokeOpacity: 1,
        },
        minor: {
            size: 4
        },
        minorElements: 3,
    });

    // extreme fancy grid
    var grid = board.create('grid', [], {
        major: {
            face: 'regularPolygon',
            size: 8,
            strokeColor: 'blue',
            fillColor: 'orange',
            strokeOpacity: 1,
        },
        minor: {
            face: 'diamond',
            size: 4,
            strokeColor: 'green',
            fillColor: 'grey',
        },
        minorElements: 1,
        includeBoundaries: false,
    });

    // grid with parent axes
    var axis1 = board.create('axis', [[-1, -2.5], [1, -2.5]], {
        ticks: {
            strokeColor: 'green',
            strokeWidth: 2,
            minorticks: 2,
            majorHeight: 10,
            drawZero: true
        }
    });
    var axis2 = board.create('axis', [[3, 0], [3, 2]], {
        ticks: {
            strokeColor: 'red',
            strokeWidth: 2,
            minorticks: 3,
            majorHeight: 10,
            drawZero: true
        }
    });
    var grid = board.create('grid', [axis1, axis2], {
        major: {
            face: 'line'
        },
        minor: {
            face: 'point',
            size: 3
        },
        minorElements: 'auto',
        includeBoundaries: false,
    });

Attribute Detail
drawZero
This attribute determines whether the grid elements located at `x=0`, `y=0` and (for major grid only) at `(0, 0)` are displayed. The main reason to set this attribute to "false", might be in combination with axes.

- If `false`, then all these elements are hidden.
- If `true`, all these elements are shown.
- If an object of the following form is given, the three cases can be distinguished individually:
  `{x: true|false, y: true|false, origin: true|false}`

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. `major: {drawZero: ...}` For default values have a look there.

Defined in: options.js.

face
Appearance of grid elements. There are different styles which differ in appearance. Possible values are (comparing to Point#face):

Input | Output | Fillable by fillColor,...
--- | --- | ---
point, . | . | no
line | − | no
cross, x | x | no
circle, o | o | yes
square, [] | [] | yes
plus, + | + | no
minus, - | - | no
divide, | | | | no
diamond, <> | <> | yes
diamond2, <<>> | <> (bigger) | yes
triangleup, ^, a, A | ^ | no
triangledown, v | v | no
triangleleft, < | < | no
triangleright, > | > | no
regularPolygon, regpol | ⬡ | yes

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. `major: {face: ...}` For default values have a look there.

Defined in: options.js.

forceSquare
To print a quadratic grid with same distance of major grid elements in x- and y-direction. `'min'` or `true` will set both distances of major grid elements in x- and y-direction to the primarily lesser value, `'max'` to the primarily greater value.
Defined in: options.js.

Default Value:
  false

gridX
Deprecated. Use Grid#majorStep instead.
Defined in: options.js.

Default Value:
  null

gridY
Deprecated. Use Grid#majorStep instead.
Defined in: options.js.

Default Value:
  null

includeBoundaries
To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
Defined in: options.js.

Default Value:
  false

major
This object contains the attributes for major grid elements. You can override the following grid attributes individually here:

- Grid#size
- Grid#face
- Grid#margin
- Grid#drawZero
- Grid#polygonVertices

Default values are:

    {
         size: 5,
         face: 'line',
         margin: 0,
         drawZero: true,
         polygonVertices: 6
     }

Defined in: options.js.

majorStep
Distance of major grid elements. There are three possibilities:

- If it is set to 'auto' the distance of the major grid equals the distance of majorTicks of the corresponding axis.
- Numbers or strings which are numbers (e.g. '10') are interpreted as distance in usrCoords.
- Strings with the unit 'px' are interpreted as distance in screen pixels.
- Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)

Instead of one value you can provide two values as an array `[x, y]` here. These are used as distance in x- and y-direction.
Defined in: options.js.

See:
  JXG.Ticks#getDistanceMajorTicks

Default Value:
  'auto'

margin
This number (pixel value) controls where grid elements end at the canvas edge. If zero, the line ends exactly at the end, if negative there is a margin to the inside, if positive the line ends outside of the canvas (which is invisible).

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. `major: {margin: ...}` For default values have a look there.

Defined in: options.js.

minor
This object contains the attributes for minor grid elements. You can override the following grid attributes individually here:

- Grid#size
- Grid#face
- Grid#margin
- Grid#drawZero
- Grid#polygonVertices

Default values are:

    {
         size: 3,
         face: 'point',
         margin: 0,
         drawZero: true,
         polygonVertices: 6
     }

Defined in: options.js.

minorElements
Number of elements in minor grid between elements of the major grid. There are three possibilities:

- If set to 'auto', the number minor elements is equal to the number of minorTicks of the corresponding axis.
- Numbers or strings which are numbers (e.g. '10') are interpreted as quantity.

Instead of one value you can provide two values as an array `[x, y]` here. These are used as number in x- and y-direction.
Defined in: options.js.

Default Value:
  0

polygonVertices
Number of vertices for face 'polygon'.

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. `major: {polygonVertices: ...}` For default values have a look there.

Defined in: options.js.

size
Size of grid elements. There are the following possibilities:

- Numbers or strings which are numbers (e.g. '10') are interpreted as size in pixels.
- Strings with additional '%' (e.g. '95%') are interpreted as the ratio of used space for one element.

Unused for 'line' which will use the value of strokeWidth. Instead of one value you can provide two values as an array `[x, y]` here. These are used as size in x- and y-direction.

This attribute can be set individually for major and minor grid as a sub-entry of Grid#major or Grid#minor, e.g. `major: {size: ...}` For default values have a look there.

Defined in: options.js.

<private> themes
Array of theme attributes. The index of the entry is the number of the theme.
Defined in: options.js.

    // Theme 1
    // quadratic grid appearance with distance of major grid elements set to the primarily greater one

    JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4], axis: true,
        defaultAxes: {
            x: { ticks: {majorHeight: 10} },
            y: { ticks: {majorHeight: 10} }
        },
        grid: { theme: 1 },
    });

    // Theme 2
    // lines and points in between

    JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4], axis: false,
        grid: { theme: 2 },
    });

    // Theme 3
    // lines and thinner lines in between

    JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4], axis: false,
        grid: { theme: 3 },
    });

    // Theme 4
    // lines with grid of '+'s plotted in between

    JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4], axis: false,
        grid: { theme: 4 },
    });

    // Theme 5
    // grid of '+'s and points in between

    JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4], axis: false,
        grid: { theme: 5 },
    });

    // Theme 6
    // grid of circles with points in between

    JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4], axis: false,
        grid: { theme: 6 },
    });

Attributes borrowed from other Elements

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 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, type, visProp, visPropCalc

Methods borrowed from other Elements

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, setPositionDirectly, 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:40 GMT+0200 (Mitteleuropäische Sommerzeit)