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

## Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Constants
- Curve
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Dump
- JXG.EventEmitter
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Math
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- 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.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Point
- JXG.Polygon
- JXG.Server
- JXG.Server.modules
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.VMLRenderer
- JXG.XML
- Label
- Legend
- Line
- Locus
- MajorArc
- MajorSector
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- Mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelpoint
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopetriangle
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle

# Class Text

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

Construct and handle texts. The coordinates can be relative to the coordinates of an element given in JXG.Options#text.anchor. MathJaX, HTML and GEONExT syntax can be handled.
Defined in: text.js.
Extends JXG.Text.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Text(z_,x,y,str)

Fields borrowed from class JXG.Text:
  size
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
  coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Field Summary
Field Attributes | Field Name and Description
--- | ---
| anchor Anchor element Point, Text or Image of the text.
| anchorX The horizontal alignment of the text.
| anchorY The vertical alignment of the text.
| attractors List of attractor elements.
| cssClass CSS class of the text in non-highlighted view.
| cssDefaultStyle Default CSS properties of the HTML text element.
| cssStyle CSS properties of the HTML text element.
| digits Used to round texts given by a number.
| display Determines the rendering method of the text.
| dragArea Sensitive area for dragging the text.
| fontSize The font size in pixels.
| fontUnit CSS unit for the font size of a text element.
| highlightCssClass CSS class of the text in highlighted view.
| highlightCssDefaultStyle Default CSS properties of the HTML text element in case of highlighting.
| highlightCssStyle CSS properties of the HTML text element in case of highlighting.
| isLabel If enabled, the text will be handled as label.
| parse If set to true, the text is parsed and evaluated.
| rotate Text rotation in degrees.
| snapSizeX Defines together with Text#snapSizeY the grid the text snaps on to.
| snapSizeY Defines together with Text#snapSizeX the grid the text snaps on to.
| useASCIIMathML If true, the input will be given to ASCIIMathML before rendering.
| useCaja If set to true and caja's sanitizeHTML function can be found it will be used to sanitize text output.
| useKatex If true, KaTeX will be used to render the input string.
| useMathJax If true, MathJax will be used to render the input string.

Fields borrowed from class JXG.Text:
  size
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
  coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

Methods borrowed from class JXG.Text:
  _createFctUpdateText, _setText, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, expandShortMath, generateTerm, getNumberofConflicts, getSize, hasPoint, notifyParents, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, update, updateRenderer, updateSize, updateText, utf8_decode
Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
Methods borrowed from class JXG.CoordsElement:
  _anim, addAnchor, addConstraint, Dist, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:key, down, drag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

Class Detail
Text(z_,x,y,str)

Parameters:
{number|function_number|function_number|function_String|function} z_,x,y,str
  Parent elements for text elements.

  Parent elements can be two or three elements of type number, a string containing a GEONExT constraint, or a function which takes no parameter and returns a number. Every parent element determines one coordinate. If a coordinate is given by a number, the number determines the initial position of a free text. If given by a string or a function that coordinate will be constrained that means the user won't be able to change the texts's position directly by mouse because it will be calculated automatically depending on the string or the function's return value. If two parent elements are given the coordinates will be interpreted as 2D affine Euclidean coordinates, if three such parent elements are given they will be interpreted as homogeneous coordinates.

  The text to display may be given as string or as function returning a string. There is the attribute 'display' which takes the values 'html' or 'internal'. In case of 'html' a HTML division tag is created to display the text. In this case it is also possible to use ASCIIMathML. Incase of 'internal', a SVG or VML text element is used to display the text.

See:
  JXG.Text

Examples:

    // Create a fixed text at position [0,1].
      var t1 = board.create('text',[0,1,"Hello World"]);

    // Create a variable text at a variable position.
      var s = board.create('slider',[[0,4],[3,4],[-2,0,2]]);
      var graph = board.create('text',
                           [function(x){ return s.Value();}, 1,
                            function(){return "The value of s is"+JXG.toFixed(s.Value(), 2);}
                           ]
                        );

    // Create a text bound to the point A
    var p = board.create('point',[0, 1]),
        t = board.create('text',[0, -1,"Hello World"], {anchor: p});

Field Detail
{Object} anchor
Anchor element Point, Text or Image of the text. If it exists, the coordinates of the text are relative to this anchor element.
Defined in: options.js.

Default Value:
  null

{String} anchorX
The horizontal alignment of the text. Possible values include `'auto`, `'left'`, `'middle'`, and `'right'`.
Defined in: options.js.

Default Value:
  'left'

{String} anchorY
The vertical alignment of the text. Possible values include `'auto`, `'top'`, `'middle'`, and `'bottom'`.
Defined in: options.js.

Default Value:
  'auto'

{Array} attractors
List of attractor elements. If the distance of the text is less than attractorDistance the text is made to glider of this element.
Defined in: options.js.

Default Value:
  empty

{String} cssClass
CSS class of the text in non-highlighted view.
Defined in: options.js.

{String} cssDefaultStyle
Default CSS properties of the HTML text element.

The CSS properties which are set here, are handed over to the style property of the HTML text element. That means, they have higher property than any CSS class.

If a property which is set here should be overruled by a CSS class then this property should be removed here.

The reason, why this attribute should be kept to its default value at all, is that screen dumps of SVG boards with `board.renderer.dumpToCanvas()` will ignore the font-family if it is set in a CSS class. It has to be set explicitly as style attribute.

In summary, the order of priorities from high to low is

1. JXG.Options.text.cssStyle
2. JXG.Options.text.cssDefaultStyle
3. JXG.Options.text.cssClass

Defined in: options.js.

    If all texts should get its font-family from the default CSS class
    before initializing the board

      JXG.Options.text.cssDefaultStyle = '';
      JXG.Options.text.highlightCssDefaultStyle = '';

    should be called.

See:
  Text#highlightCssDefaultStyle
  Text#cssStyle
  Text#highlightCssStyle

Default Value:
  'font-family: Arial, Helvetica, Geneva, sans-serif;'

{String} cssStyle
CSS properties of the HTML text element.

The CSS properties which are set here, are handed over to the style property of the HTML text element. That means, they have higher property than any CSS class.
Defined in: options.js.

See:
  Text#cssDefaultStyle
  Text#highlightCssDefaultStyle
  Text#highlightCssStyle

Default Value:
  ''

{Number} digits
Used to round texts given by a number.
Defined in: options.js.

Default Value:
  2

{String} display
Determines the rendering method of the text. Possible values include `'html'` and `'internal`.
Defined in: options.js.

Default Value:
  'html'

{String} dragArea
Sensitive area for dragging the text. Possible values are 'all', or something else. If set to 'small', a sensitivity margin at the right and left border is taken. This may be extended to left, right, ... in the future.
Defined in: options.js.

Default Value:
  'all'

{Number} fontSize
The font size in pixels.
Defined in: options.js.

See:
  Text#fontUnit

Default Value:
  12

{String} fontUnit
CSS unit for the font size of a text element. Usually, this will be the default value 'px' but for responsive application, also 'vw', 'vh', vmax', 'vmin' or 'rem' might be useful.
Defined in: options.js.

    var txt = board.create('text', [2, 2, "hello"], {fontSize: 8, fontUnit: 'vmin'});

See:
  Text#fontSize

Default Value:
  'px'

{String} highlightCssClass
CSS class of the text in highlighted view.
Defined in: options.js.

{String} highlightCssDefaultStyle
Default CSS properties of the HTML text element in case of highlighting.

The CSS properties which are set here, are handed over to the style property of the HTML text element. That means, they have higher property than any CSS class.
Defined in: options.js.

    If all texts should get its font-family from the default CSS class
    before initializing the board

      JXG.Options.text.cssDefaultStyle = '';
      JXG.Options.text.highlightCssDefaultStyle = '';

    should be called.

See:
  Text#cssDefaultStyle
  Text#cssStyle
  Text#highlightCssStyle

Default Value:
  'font-family: Arial, Helvetica, Geneva, sans-serif;'

{String} highlightCssStyle
CSS properties of the HTML text element in case of highlighting.

The CSS properties which are set here, are handed over to the style property of the HTML text element. That means, they have higher property than any CSS class.
Defined in: options.js.

See:
  Text#cssDefaultStyle
  Text#highlightCssDefaultStyle
  Text#cssStyle

Default Value:
  ''

{Boolean} isLabel
If enabled, the text will be handled as label. Intended for internal use.
Defined in: options.js.

Default Value:
  false

{Boolean} parse
If set to true, the text is parsed and evaluated. For labels parse==true results in converting names of the form k_a to subscripts. If the text is given by string and parse==true, the string is parsed as JessieCode expression.
Defined in: options.js.

Default Value:
  true

{Number} rotate
Text rotation in degrees. Works for non-zero values only in combination with display=='internal'.
Defined in: options.js.

Default Value:
  0

{Number} snapSizeX
Defines together with Text#snapSizeY the grid the text snaps on to. The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than `0`, it will use the grid displayed by the major ticks of the default ticks of the default x axes of the board.
Defined in: options.js.

See:
  Point#snapToGrid
  Text#snapSizeY
  JXG.Board#defaultAxes

Default Value:
  1

{Number} snapSizeY
Defines together with Text#snapSizeX the grid the text snaps on to. The text will only snap on integer multiples to snapSizeX in x and snapSizeY in y direction. If this value is equal to or less than `0`, it will use the grid displayed by the major ticks of the default ticks of the default y axes of the board.
Defined in: options.js.

See:
  Point#snapToGrid
  Text#snapSizeX
  JXG.Board#defaultAxes

Default Value:
  1

{Boolean} useASCIIMathML
If true, the input will be given to ASCIIMathML before rendering.
Defined in: options.js.

Default Value:
  false

{Boolean} useCaja
If set to true and caja's sanitizeHTML function can be found it will be used to sanitize text output.
Defined in: options.js.

Default Value:
  false

{Boolean} useKatex
If true, KaTeX will be used to render the input string. For this feature, katex.min.js and katex.min.css have to be included.

The example below does not work, because there is a conflict with the MathJax library which is used below.

Defined in: options.js.

    JXG.Options.text.useKatex = true;

    const board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-2, 5, 8, -5], axis:true
    });

    var a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
        suffixlabel:'t_1=',
        unitLabel: ' \\text{ ms}',
        snapWidth:0.01});

    func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
    text1 = board.create('text', [5, 1, function(){
                return 'a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}';
            }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top'});

Default Value:
  false

{Boolean} useMathJax
If true, MathJax will be used to render the input string. Supports MathJax 2 as well as Mathjax 3. It is recommended to use this option together with the option "parse: false". Otherwise, 4 backslashes (e.g. \\\\alpha) are needed instead of two (e.g. \\alpha).
Defined in: options.js.

     // Before loading MathJax, it has to be configured something like this:
    window.MathJax = {
      tex: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        packages: ['base', 'ams']
      },
      options: {
        ignoreHtmlClass: 'tex2jax_ignore',
        processHtmlClass: 'tex2jax_process'
      }
    };

    // Display style
    board.create('text',[ 2,2,  function(){return '$$X=\\frac{2}{x}$$'}], {
        fontSize: 15, color:'green', useMathJax: true});

    // Inline style
    board.create('text',[-2,2,  function(){return '$X_A=\\frac{2}{x}$'}], {
        fontSize: 15, color:'green', useMathJax: true});

    var A = board.create('point', [-2, 0]);
    var B = board.create('point', [1, 0]);
    var C = board.create('point', [0, 1]);

    var graph = board.create('ellipse', [A, B, C], {
            fixed: true,
            withLabel: true,
            strokeColor: 'black',
            strokeWidth: 2,
            fillColor: '#cccccc',
            fillOpacity: 0.3,
            highlightStrokeColor: 'red',
            highlightStrokeWidth: 3,
            name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
            label: {useMathJax: true}
        });

    var nvect1 = board.create('text', [-4, -3, '\\[\\overrightarrow{V}\\]'],
    {
      fontSize: 24, parse: false
    });
    var nvect1 = board.create('text', [-2, -4, function() {return '$\\overrightarrow{G}$';}],
    {
      fontSize: 24, useMathJax: true
    });

    // Load MathJax:
    // <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"<</script>

    // function and its derivative
    var f1 = function(x) { return x * x * x; },
    graph1 = board.create('functiongraph', [f1, -0.1, 1.1]),

    A = board.create('glider', [0.5, f1(0.5), graph1], {
                name: 'f(x)',
                color: 'black',
                face:'x',
                fixed: true,
                size: 3,
                label: {offset: [-30, 10], fontSize: 15}
            }),
    B = board.create('glider', [0.7, f1(0.7), graph1], {
                name: 'f(x+Δx)',
                size: 3,
                label: {offset: [-60, 10], fontSize: 15}
            }),

    secant_line = board.create('line', [A,B],{dash: 1, color: 'green'}),
    a_h_segment = board.create('segment', [A, [
                        function(){ return B.X() > A.X() ? B.X() : A.X()},
                        function(){ return B.X() > A.X() ? A.Y() : B.Y()}
                    ]],{ name: 'Δx', dash: 1, color: 'black'});

    b_v_segment = board.create('segment', [B, [
                        function(){ return B.X() > A.X() ? B.X() : A.X()},
                        function(){ return B.X() > A.X() ? A.Y() : B.Y()}
                    ]],{ name: 'Δy', dash: 1, color: 'black'}),

    ma = board.create('midpoint', [a_h_segment.point1, a_h_segment.point2
        ], {visible: false});

    board.create('text', [0, 0, function() {return '\\[\\Delta_x='+(B.X()-A.X()).toFixed(4)+'\\]'}], {
        anchor: ma, useMathJax: true, fixed: true, color: 'green', anchorY: 'top'
    });

    mb = board.create('midpoint', [b_v_segment.point1, b_v_segment.point2], {visible: false});
    board.create('text', [0, 0, function() {return '\\[\\Delta_y='+(B.Y()-A.Y()).toFixed(4)+'\\]'}], {
        anchor: mb, useMathJax: true, fixed: true, color: 'green'
    });

    dval = board.create('text',[0.1, 0.8,
        function(){
            return '\\[\\frac{\\Delta_y}{\\Delta_x}=\\frac{' + ((B.Y()-A.Y()).toFixed(4)) + '}{' + ((B.X()-A.X()).toFixed(4)) +
                '}=' + (((B.Y()-A.Y()).toFixed(4))/((B.X()-A.X()).toFixed(4))).toFixed(4) + '\\]';
        }],{fontSize: 15, useMathJax: true});

    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.options.text.useMathjax = true;

    a = board.create('slider',[[-0.7,1.5],[5,1.5],[0,0.5,1]], {
        suffixlabel:'\\(t_1=\\)',
        unitLabel: ' \\(\\text{ ms}\\)',
        snapWidth:0.01}),

    func = board.create('functiongraph',[function(x){return (a.Value()*x*x)}], {strokeColor: "red"});
    text1 = board.create('text', [5, 1, function(){
                return '\\(a(t)= { 1 \\over ' + a.Value().toFixed(3) + '}\\)';
            }], {fontSize: 15, fixed:true, strokeColor:'red', anchorY: 'top', parse: false});

See:
  Text#parse

Default Value:
  false