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 Label

JXG.CoordsElement,JXG.GeometryElement
   ↳ JXG.Text
         ↳ Label

Labels are text objects tied to other elements like points, lines and curves. Labels are handled internally by JSXGraph, only. There is NO constructor "board.create('label', ...)".

Defined in: text.js.
Extends JXG.Text.

Element Summary
Constructor Attributes Constructor Name and Description
 
Labels for points are positioned with the attributes Text#anchorX, Text#anchorX and Label#offset.
Attributes Summary
Field Attributes Field Name and Description
 
Automatic position of label text.
 
The auto position algorithm tries to put a label to a conflict-free position around it's anchor element.
 
The auto position algorithm tries to put a label to a conflict-free position around it's anchor element.
 
List of object ids which should be ignored on setting automatic position of label text.
 
Distance of the label from a path element, like line, circle, curve.
 
Label offset from label anchor.
 
Point labels are positioned by setting Point#anchorX, Point#anchorY and Label#offset.
Methods borrowed from class JXG.Text:
_createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, 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
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval
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
Label
Labels for points are positioned with the attributes Text#anchorX, Text#anchorX and Label#offset.

Labels for lines, segments, curves and circles can be controlled additionally by the attributes Label#position and Label#distance, i.e. for a segment [A, B] one could use the follwoing attributes:

  • "position": determines, where in the direction of the segment from A to B the label is placed
  • "distance": determines the (orthogonal) distance of the label from the line segment. It is a factor which is multiplied by the font-size.
  • "offset: [h, v]": a final correction in pixel (horizontally: h, vertically: v)
  • "anchorX" ('left', 'middle', 'right') and "anchorY" ('bottom', 'middle', 'top'): determines which part of the label string is the anchor position that is positioned to the coordinates determined by "position", "distance" and "offset".
Attribute Detail
{Boolean} autoPosition
Automatic position of label text. When called first, the positioning algorithm starts at the position defined by offset. The algorithm tries to find a position with the least number of overlappings with other elements, while retaining the distance to the anchor element.
Defined in: options.js.
	var p1 = board.create('point', [-2, 1], {id: 'A'});
	var p2 = board.create('point', [-0.85, 1], {
     name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}
 });
	var p3 = board.create('point', [-1, 1.2], {
     name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}
 });
 var c = board.create('circle', [p1, p2]);
	var l = board.create('line', [p1, p2]);


					
					

						
						
						
							
See:
Label#offset
Default Value:
false

{Number} autoPositionMaxDistance
The auto position algorithm tries to put a label to a conflict-free position around it's anchor element. For this, the algorithm tests 12 positions around the anchor element up to a distance from the anchor defined here (in pixel).
Defined in: options.js.
See:
Label#autoPosition
Label#autoPositionMinDistance
Default Value:
28

{Number} autoPositionMinDistance
The auto position algorithm tries to put a label to a conflict-free position around it's anchor element. For this, the algorithm tests 12 positions around the anchor element starting at a distance from the anchor defined here (in pixel).
Defined in: options.js.
See:
Label#autoPosition
Label#autoPositionMaxDistance
Default Value:
12

{Array} autoPositionWhitelist
List of object ids which should be ignored on setting automatic position of label text.
Defined in: options.js.
See:
Label#autoPosition
Default Value:
[]

{Number} distance
Distance of the label from a path element, like line, circle, curve. The true distance is this value multiplied by 0.5 times the size of the bounding box of the label text. That means, with a value of 1 the label will touch the path element.
Defined in: options.js.
See:
Label#position
Default Value:
1.5

{Array} offset
Label offset from label anchor. The label anchor is determined by Label#position
Defined in: options.js.
See:
Label#position
Default Value:
[10,10]

{String} position
Point labels are positioned by setting Point#anchorX, Point#anchorY and Label#offset. For line, circle and curve elements (and their derived objects) there are two possibilities to position labels.
  • The first (old) possibility uses the MetaPost system: Possible string values for the position of a label for label anchor points are:
    • 'first' (lines only)
    • 'last' (lines only)
    • 'lft'
    • 'rt'
    • 'top'
    • 'bot'
    • 'ulft'
    • 'urt'
    • 'llft'
    • 'lrt'
  • the second (preferred) possibility (since v1.9.0) is: with position: 'len side' the label can be positioned exactly along the element's path. Here,
    • 'len' is an expression of the form
      • xfr, denoting a fraction of the whole. x is expected to be a number between 0 and 1.
      • x%, a percentage. x is expected to be a number between 0 and 100.
      • x, a number: only possible for line elements and circles. For lines, the label is positioned x user units from the starting point. For circles, the number is interpreted as degree, e.g. 45°. For everything else, 0 is taken instead.
      • xpx, a pixel value: only possible for line elements. The label is positioned x pixels from the starting point. For non-lines, 0% is taken instead.
    • 'side' is either 'left' or 'right'. The label is positioned to the left or right of the path, when moving from the first point to the last. For circles, 'left' means inside of the circle, 'right' means outside of the circle. The distance of the label from the path can be controlled by Label#distance.
    Recommended for this second possibility is to use anchorX: 'middle' and 'anchorY: 'middle'.

Defined in: options.js.
var l1 = board.create('segment', [[-3, 2], [3, 2]], {
    name: 'l_1',
    withLabel: true,
    point1: { visible: true, name: 'A', withLabel: true },
    point2: { visible: true, name: 'B', withLabel: true },
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        distance: 1.2,
        position: '0.2fr left'
    }
});


					
					
var c1 = board.create('circle', [[0, 0], 3], {
    name: 'c_1',
    withLabel: true,
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        fontSize: 32,
        distance: 1.5,
        position: '50% right'
    }
});


					
					
var cu1 = board.create('functiongraph', ['3 * sin(x)', -3, 3], {
    name: 'cu_1',
    withLabel: true,
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        distance: 2,
        position: '0.8fr right'
    }
});


					
					
var A = board.create('point', [-1, 4]);
var B = board.create('point', [-1, -4]);
var C = board.create('point', [1, 1]);
var cu2 = board.create('ellipse', [A, B, C], {
    name: 'cu_2',
    withLabel: true,
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        fontSize: 20,
        distance: 1.5,
        position: '75% right'
    }
});


					
					

						
						
						
							
See:
Label#distance
Label#offset
Default Value:
'urt'

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, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel

Fields borrowed from other Elements
Fields borrowed from class JXG.Text:
size
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
Fields borrowed from class JXG.CoordsElement:
coords, groups, isConstrained, needsUpdateFromParent, onPolygon, slideObject, slideObjects

Methods borrowed from other Elements
Methods borrowed from class JXG.Text:
_createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, 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
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval

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 Jul 21 2025 16:18:47 GMT+0200 (Mitteleuropäische Sommerzeit)