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

JXG.CoordsElement,JXG.GeometryElement
↳ JXG.Text
↳ Smartlabel

Customized text elements for displaying measurements of JSXGraph elements, Examples are length of a segment, perimeter or area of a circle or polygon (including polygonal chain), slope of a line, value of an angle, and coordinates of a point.

If additionally a text, or a function is supplied and the content is not the empty string, that text is displayed instead of the measurement.

Smartlabels use custom made CSS layouts defined in jsxgraph.css. Therefore, the inclusion of the file jsxgraph.css is mandatory or the CSS classes have to be replaced by other classes.

The default attributes for smartlabels are defined for each type of measured element in the following sub-objects. This is a deviation from the usual JSXGraph attribute usage.

- `JXG.Options.smartlabelangle` for smartlabels of angle objects
- `JXG.Options.smartlabelcircle` for smartlabels of circle objects
- `JXG.Options.smartlabelline` for smartlabels of line objects
- `JXG.Options.smartlabelpoint` for smartlabels of point objects.
- `JXG.Options.smartlabelpolygon` for smartlabels of polygon objects.

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

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

Attributes Summary
Field Attributes | Field Name and Description
--- | ---
| cssClass CSS classes for the smart label.
| dir Display of point coordinates either as row vector or column vector.
| highlightCssClass CSS classes for the smart label when highlighted.
| measure Type of measurement.
| prefix Prefix text for the smartlabel.
| suffix Suffix text for the smartlabel.
| unit Measurement unit appended to the output text.

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
Smartlabel

This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "smartlabel".
Possible parent array combinations are:
{JXG.GeometryElement} Parent
  parent object: point, line, circle, polygon, angle.
{String|Function} Txt
  Optional text. In case, this content is not the empty string, the measurement is overwritten by this text.

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

Examples:

    var p1 = board.create('point', [3, 4], {showInfobox: false, withLabel: false});
    board.create('smartlabel', [p1], {digits: 1, unit: 'm', dir: 'col', useMathJax: false});

    var s1 = board.create('line', [[-7, 2], [6, -6]], {point1: {visible:true}, point2: {visible:true}});
    board.create('smartlabel', [s1], {unit: 'm', measure: 'length', prefix: 'L = ', useMathJax: false});
    board.create('smartlabel', [s1], {unit: 'm',  measure: 'slope', prefix: 'Δ = ', useMathJax: false});

    var c1 = board.create('circle', [[0, 1], [4, 1]], {point2: {visible: true}});
    board.create('smartlabel', [c1], {unit: 'm', measure: 'perimeter', prefix: 'U = ', useMathJax: false});
    board.create('smartlabel', [c1], {unit: 'm', measure: 'area', prefix: 'A = ', useMathJax: false});
    board.create('smartlabel', [c1], {unit: 'm', measure: 'radius', prefix: 'R = ', useMathJax: false});

    var p2 = board.create('polygon', [[-6, -5], [7, -7], [-4, 3]], {});
    board.create('smartlabel', [p2], {
        unit: 'm',
        measure: 'area',
        prefix: 'A = ',
        cssClass: 'smart-label-pure smart-label-polygon',
        highlightCssClass: 'smart-label-pure smart-label-polygon',
        useMathJax: false
    });
    board.create('smartlabel', [p2, () => 'X: ' + p2.vertices[0].X().toFixed(1)], {
        measure: 'perimeter',
        cssClass: 'smart-label-outline smart-label-polygon',
        highlightCssClass: 'smart-label-outline smart-label-polygon',
        useMathJax: false
    });

    var a1 = board.create('angle', [[1, -1], [1, 2], [1, 5]], {name: 'β', withLabel: false});
    var sma = board.create('smartlabel', [a1], {digits: 1, prefix: a1.name + '=', unit: '°', useMathJax: false});

Attribute Detail
{String} cssClass
CSS classes for the smart label. Available classes are:

- 'smart-label-solid'
- 'smart-label-outline'
- 'smart-label-pure'

By default, an additional class is given specific for the element type. Available classes are 'smart-label-angle', 'smart-label-circle', 'smart-label-line', 'smart-label-point', 'smart-label-polygon'.
Defined in: options.js.

     cssClass: 'smart-label-solid smart-label-point'

See:
  Smartlabel#highlightCssClass

Default Value:
  - 'smart-label-solid smart-label-circle' for circles
  - 'smart-label-solid smart-label-point' for points
  - ...

{String} dir
Display of point coordinates either as row vector or column vector. Available values are 'row' or 'column'.
Defined in: options.js.

Default Value:
  'row'

{String} highlightCssClass
CSS classes for the smart label when highlighted.
Defined in: options.js.

See:
  Smartlabel#cssClass

Default Value:
  - 'smart-label-solid smart-label-circle' for circles
  - 'smart-label-solid smart-label-point' for points
  - ...

{String} measure
Type of measurement. Available values are:

- 'deg', 'rad' for angles
- 'area', 'perimeter', 'radius' for circles
- 'length', 'slope' for lines
- 'area', 'perimeter' for polygons

Dependent on this value, i.e. the type of measurement, the label is positioned differently on the object.
Defined in: options.js.

Default Value:
  - 'radius' for circles
  - 'length' for lines
  - 'area' for polygons
  - 'deg' for angles

prefix
Prefix text for the smartlabel. Comes before the measurement value.
Defined in: options.js.

Default Value:
  ''

suffix
Suffix text for the smartlabel. Comes after unit.
Defined in: options.js.

Default Value:
  ''

unit
Measurement unit appended to the output text. For areas, the unit is squared automatically. Comes directly after the measurement value.
Defined in: options.js.

Default Value:
  ''

Attributes borrowed from other Elements

Attributes borrowed from class JXG.GeometryElement:
  aria, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, 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, position, 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 Fri Apr 04 2025 09:22:42 GMT+0200 (Mitteleuropäische Sommerzeit)