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 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.



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

Element Summary
Constructor Attributes Constructor Name and Description
 
Smartlabel
Attributes Summary
Field Attributes Field Name and Description
 
baseUnit
This specifies the unit of measurement in dimension 1 (e.g.
 
cssClass
CSS classes for the smart label.
 
dir
Display of point coordinates either as row vector or column vector.
 
formatValue
Function to format the value.
 
highlightCssClass
CSS classes for the smart label when highlighted.
 
measure
Type of measurement.
 
orientation
Orientation of the smartlabel relative to the line.
 
prefix
Prefix text for the smartlabel.
 
showPrefix
Determines whether a prefix is displayed before the measurement value and unit.
 
showSuffix
Determines whether a suffix is displayed after the measurement value and unit.
 
suffix
Suffix text for the smartlabel.
 
unit
Measurement unit appended to the output text.
 
units
This attribute expects an object that has the dimension numbers as keys (as integer or in the form of 'dimxx') and assigns a string to each dimension.
 
visibleThreshold
Smartlabels of circles and lines are hidden automatically, if there is not enough space.
Methods borrowed from class JXG.Text:
_createFctUpdateText, _setText, bounds, calculateScore, 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, toTopOfLayer, 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, baseUnit: 'm', dir: 'col', useMathJax: false});



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






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






				
				
var p2 = board.create('polygon', [[-6, -5], [7, -7], [-4, 3]], {});
board.create('smartlabel', [p2], {
    baseUnit: '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 + '=', baseUnit: '°', useMathJax: false});





				
                

				


			

			


			
				

    				 Attribute Detail
				

				
					 
					


					{String}
					baseUnit

					

					

						This specifies the unit of measurement in dimension 1 (e.g. length).
A power is automatically added to the string.
If you want to use different units for each dimension, see Smartlabel#units.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Smartlabel#units

							
							

						
						
							

							
Default Value:

							

								''
							

							

						

					

				
					 
					


					{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'
							

							

						

					

				
					 
					


					{Function}
					formatValue

					

					

						Function to format the value.
If set to null, no formatting will happen.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								null
							

							

						

					

				
					 
					


					{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
    • 


							

							

						

					

				
					 
					


					{String}
					orientation

					

					

						Orientation of the smartlabel relative to the line.
Available values are:
 
    
 
  •  'parallel' (default)
    • 
 
  •  'parallel-inverted' / 'inverted'
    • 
 
  •  'orthogonal'
    • 
 
  •  'orthogonal-inverted'
    • 
 
  •  'none' (smartlabe is always horizontal)
    • 


Dependent on this value the label is positioned differently on the line.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								'parallel'
							

							

						

					

				
					 
					


					
					prefix

					

					

						Prefix text for the smartlabel. Comes before the measurement value.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								''
							

							

						

					

				
					 
					


					{Boolean}
					showPrefix

					

					

						Determines whether a prefix is displayed before the measurement value and unit.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Smartlabel#prefix

							
							

						
						
							

							
Default Value:

							

								true
							

							

						

					

				
					 
					


					{Boolean}
					showSuffix

					

					

						Determines whether a suffix is displayed after the measurement value and unit.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Smartlabel#suffix

							
							

						
						
							

							
Default Value:

							

								true
							

							

						

					

				
					 
					


					
					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.
Replaced by the attributes "baseUnit" and "units".
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Smartlabel#baseUnit

							
							
Smartlabel#units

							
							

						
						
							

							
Default Value:

							

								''
							

							

						

					

				
					 
					


					{Object}
					units

					

					

						This attribute expects an object that has the dimension numbers as keys (as integer or in the form of 'dimxx')
and assigns a string to each dimension.
If a dimension has no specification, Smartlabel#baseUnit is used.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Smartlabel#baseUnit

							
							

						
						

					

				
					 
					


					{String}
					visibleThreshold

					

					

						Smartlabels of circles and lines are hidden automatically, if there is not enough space.
This value (between 0 and 1) controls, how much percent of the line length or circle diameter
the label is allowed to take place
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								
    
    
  • 0.7 for lines
    • 
    
  • 0.6 for angles
    • 


							

							

						

					
				
			


			


			


			

			


			
                
                

                    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, ignoreForLabelAutoposition, 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, calculateScore, 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, toTopOfLayer, 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 Tue May 05 2026 10:26:32 GMT+0200 (Mitteleuropäische Sommerzeit)