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
Classes

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):



InputOutputFillable by fillColor,...


point, ..no


line−no


cross, xxno


circle, ooyes


square, [][]yes


plus, ++no


minus, --no


divide, ||no


diamond, <><>yes


diamond2, <<>><> (bigger)yes


triangleup, ^, a, A^no


triangledown, vvno


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:

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:

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, ignoreForLabelAutoposition, 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 Mon Oct 06 2025 17:36:52 GMT+0200 (Mitteleuropäische Sommerzeit)