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
	Label Labels for points are positioned with the attributes Text#anchorX, Text#anchorX and Label#offset.

Attributes Summary
Field Attributes	Field Name and Description
	autoPosition Automatic position of label text.
	autoPositionMaxDistance The auto position algorithm tries to put a label to a conflict-free position around it's anchor element.
	autoPositionMinDistance The auto position algorithm tries to put a label to a conflict-free position around it's anchor element.
	autoPositionWhitelist List of object ids which should be ignored on setting automatic position of label text.
	distance Distance of the label from a path element, like line, circle, curve.
	offset Label offset from label anchor.
	position 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

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

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.

Element Label