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 Ticks

JXG.GeometryElement
   ↳ JXG.Ticks
         ↳ Ticks

Ticks are used as distance markers on a line or curve. They are mainly used for axis elements and slider elements. Ticks may stretch infinitely or finitely, which can be set with Ticks#majorHeight and Ticks#minorHeight.

There are the following ways to position the tick lines:

  1. If an array is given as optional second parameter for the constructor like e.g. board.create('ticks', [line, [1, 4, 5]]), then there will be (fixed) ticks at position 1, 4 and 5 of the line.
  2. If there is only one parameter given, like e.g. board.create('ticks', [line]), the ticks will be set equidistant across the line element. There are two variants:
    1. Setting the attribute insertTicks:false: in this case the distance between two major ticks is determined by the attribute ticksDistance. This distance is given in user units.
    2. Setting the attribute insertTicks:true: in this case the distance between two major ticks is set automatically, depending on
      • the size of the board,
      • the attribute minTicksDistance, which is the minimum distance between two consecutive minor ticks (in pixel).
      The distance between two major ticks is a value of the form a 10i, where a is one of {1, 2, 5} and the number a 10i is maximized such that there are approximately 6 major ticks and there are at least "minTicksDistance" pixel between minor ticks.

    For arbitrary lines (and not axes) a "zero coordinate" is determined which defines where the first tick is positioned. This zero coordinate can be altered with the attribute anchor. Possible values are "left", "middle", "right" or a number. The default value is "left".

    Defined in: ticks.js.
    Extends JXG.Ticks.

    Element Summary
    Constructor Attributes Constructor Name and Description
     
    Attributes Summary
    Field Attributes Field Name and Description
     
    Determine the position of the tick with value 0.
     
    Format tick labels that were going to have scientific notation like 5.00e+6 to look like 5•10⁶.
     
    If a label exceeds Ticks#maxLabelLength this determines the number of digits used to shorten the tick label.
     
    Draw labels yes/no
     
    Draw the zero tick, that lies at line.point1?
     
    Tick face for major ticks of finite length.
     
    A function that expects two JXG.Coords, the first one representing the coordinates of the tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
    <deprecated>  
    A function that expects two JXG.Coords, the first one representing the coordinates of the tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
     
    If true, ignore the tick endings attribute for infinite (full height) ticks.
     
    Whether line boundaries should be included or not in the lower and upper bounds when creating ticks.
     
    Let JSXGraph determine the distance between ticks automatically.
     
    Internationalization support for ticks labels.
     
    Attributes for the ticks labels
     
    User defined labels for special ticks.
     
    Total height of a major tick.
     
    Decides in which direction major ticks are visible.
     
    The maximum number of characters a tick label can use.
     
    Total height of a minor tick.
     
    The number of minor ticks between two major ticks.
     
    Minimum distance in pixel of equidistant ticks in case insertTicks==true.
     
    If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label.
     
    Scale the ticks but not the tick labels.
     
    A string that is appended to every tick, used to represent the scale factor given in Ticks#scale.
     
    Decides in which direction minor ticks are visible.
     
    The default distance (in user coordinates, not pixels) between two ticks.
     
    By default, i.e.
     
    Set the ticks type.
     
    Use the unicode character 0x2212, i.e.
    Methods borrowed from class JXG.Ticks:
    _isInsideCanvas, beautifyScientificNotationLabel, calculateTicksCoordinates, createTickPath, formatLabelText, generateEquidistantTicks, generateFixedTicks, generateLabelData, getDistanceFromZero, getDistanceMajorTicks, getLowerAndUpperBounds, getXandYdeltas, getZeroCoordinates, hasPoint, processTickPosition, setPositionDirectly, setTicksSizeVariables, update, updateRenderer, updateRendererLabels
    Methods borrowed from class JXG.GeometryElement:
    _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, 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, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
    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
    Ticks
    This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "ticks".

    Possible parent array combinations are:
    {JXG.Line|JXG.Curve} line

    The parents consist of the line or curve the ticks are going to be attached to.


    {Array} ticks

    Optional array of numbers. If given, a fixed number of static ticks is created at these user-supplied positions.

    Deprecated: Alternatively, a number defining the distance between two major ticks can be specified. However, this is meanwhile ignored. Use attribute ticksDistance instead.



    Throws:
    {Exception}
    If the element cannot be constructed with the given parent objects an exception is thrown.
    Examples:
    // Add ticks to line 'l1' through 'p1' and 'p2'. The major ticks are
    // two units apart and 40 px long.
      var p1 = board.create('point', [0, 3]);
      var p2 = board.create('point', [1, 3]);
      var l1 = board.create('line', [p1, p2]);
      var t = board.create('ticks', [l1], {
         ticksDistance: 2,
         majorHeight: 40
      });
    
    
    				
    				
     // Create ticks labels as fractions
    board.create('axis', [[0,1], [1,1]], {
        ticks: {
            label: {
                toFraction: true,
                useMathjax: true,
                display: 'html',
                anchorX: 'middle',
                offset: [0, -10]
            }
        }
    });
    
    
    
    				
    				
    
    				
                    
    Attribute Detail
    {String} anchor
    Determine the position of the tick with value 0. 'left' means point1 of the line, 'right' means point2, and 'middle' is equivalent to the midpoint of the defining points. This attribute is ignored if the parent line is of type axis.
    Defined in: options.js.
    var li = board.create('segment', [[-4, -3], [4, 2]]);
    var t = board.create('ticks', [li], {
        // drawZero: true,
        anchor: 'left',
        drawLabels: true,
        minorTicks: 0,
        label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -5]
        }
    });
    
    
    
    
    					
    					
    var li = board.create('segment', [[-4, -3], [4, 2]]);
    var t = board.create('ticks', [li], {
        drawZero: true,
        anchor: 'middle',
        drawLabels: true,
        minorTicks: 0,
        label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -5]
        }
    });
    
    
    
    					
    					
    
    						
    						
    						
    						
    							
    Default Value:
    'left'

    {Boolean} beautifulScientificTickLabels
    Format tick labels that were going to have scientific notation like 5.00e+6 to look like 5•10⁶.
    Defined in: options.js.
    var board = JXG.JSXGraph.initBoard("jxgbox", {
        boundingbox: [-500000, 500000, 500000, -500000],
        axis: true,
        defaultAxes: {
            x: {
                scalable: true,
                ticks: {
                    beautifulScientificTickLabels: true
              },
            },
            y: {
                scalable: true,
                ticks: {
                    beautifulScientificTickLabels: true
              },
            }
        },
    });
    
    
    
    					
    					
    
    						
    						
    						
    						
    							
    Default Value:
    false

    {Number} digits
    If a label exceeds Ticks#maxLabelLength this determines the number of digits used to shorten the tick label.
    Defined in: options.js.
    See:
    Ticks#maxLabelLength
    Default Value:
    3

    {Boolean} drawLabels
    Draw labels yes/no
    Defined in: options.js.
    Default Value:
    false

    {Boolean} drawZero
    Draw the zero tick, that lies at line.point1?
    Defined in: options.js.
    var li = board.create('segment', [[-4, 2], [4, 2]]);
    var t = board.create('ticks', [li], {
        drawZero: false,
        anchor: 'middle',
        drawLabels: true,
        minorTicks: 0,
        label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -5]
        }
    });
    
    var li2 = board.create('segment', [[-4, -2], [4, -2]]);
    var t2 = board.create('ticks', [li2], {
        drawZero: true,
        anchor: 'middle',
        drawLabels: true,
        minorTicks: 0,
        label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -5]
        }
    });
    
    
    
    					
    					
    
    						
    						
    						
    						
    							
    Default Value:
    false

    {String} face
    Tick face for major ticks of finite length. By default (face: '|') this is a straight line. Possible other values are '<' and '>'. These faces are used in JXG.Hatch for hatch marking parallel lines.
    Defined in: options.js.
      var p1 = board.create('point', [0, 3]);
      var p2 = board.create('point', [1, 3]);
      var l1 = board.create('line', [p1, p2]);
      var t = board.create('ticks', [l1], {ticksDistance: 2, face: '>', minorTicks: 0});
    
    
    
    					
    					
    
    						
    						
    						
    							
    See:
    hatch
    Default Value:
    '|'

    {function} generateLabelText
    A function that expects two JXG.Coords, the first one representing the coordinates of the tick that is to be labeled, the second one the coordinates of the center (the tick with position 0). The third parameter is a null, number or a string. In the latter two cases, this value is taken. Returns a string.
    Defined in: options.js.
    const board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-10, 10, 10, -10], axis: true,
        defaultAxes: {
            x: {
                    margin: -4,
                    ticks: {
                        minTicksDistance: 0,
                        minorTicks:4,
                        ticksDistance: 3,
                        scale: Math.PI,
                        scaleSymbol: 'π',
                        insertTicks: true
                    }
                 },
            y: {}
        }
    });
    
    // Generate a logarithmic labelling of the vertical axis.
    board.defaultAxes.y.ticks[0].generateLabelText = function (tick, zero) {
        var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2])),
            distance, labelText;
        return this.formatLabelText(value);
    };
    
    
    
    					
    					
    
    						
    						
    						
    						
    
    					
    {function} generateLabelValue
    A function that expects two JXG.Coords, the first one representing the coordinates of the tick that is to be labeled, the second one the coordinates of the center (the tick with position 0).
    Defined in: options.js.
    Deprecated:
    Use JGX.Options@generateLabelText

    {Boolean} ignoreInfiniteTickEndings
    If true, ignore the tick endings attribute for infinite (full height) ticks. This affects major and minor ticks.
    Defined in: options.js.
    See:
    Ticks#tickEndings
    Ticks#majorTickEndings
    Default Value:
    true

    {Boolean} includeBoundaries
    Whether line boundaries should be included or not in the lower and upper bounds when creating ticks. In mathematical terms: if a segment considered as interval is open (includeBoundaries:false) or closed (includeBoundaries:true). In case of open interval, the interval is shortened by a small ε.
    Defined in: options.js.
    var li = board.create('segment', [[-4, 2], [4, 2]]);
    var t = board.create('ticks', [li], {
        includeBoundaries: true,
        drawZero: true,
        anchor: 'middle',
        drawLabels: true,
        minorTicks: 0,
        label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -5]
        }
    });
    
    var li2 = board.create('segment', [[-4, -2], [4, -2]]);
    var t2 = board.create('ticks', [li2], {
        includeBoundaries: false,
        drawZero: true,
        anchor: 'middle',
        drawLabels: true,
        minorTicks: 0,
        label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -5]
        }
    });
    
    
    
    					
    					
    
    						
    						
    						
    						
    							
    Default Value:
    false

    {Boolean} insertTicks
    Let JSXGraph determine the distance between ticks automatically. If true, the attribute ticksDistance is ignored. The distance between ticks is affected by the size of the board and the attribute minTicksDistance (in pixel).
    Defined in: options.js.
    // Create an axis providing two coord pairs.
      var p1 = board.create('point', [0, 0]);
      var p2 = board.create('point', [50, 25]);
      var l1 = board.create('line', [p1, p2]);
      var t = board.create('ticks', [l1], {
         insertTicks: true,
         majorHeight: -1,
         label: {
             offset: [4, -9]
         },
         drawLabels: true
     });
    
    
    					
    					
    
    						
    						
    						
    							
    See:
    Ticks#ticksDistance
    Ticks#minTicksDistance
    Default Value:
    false

    intl
    Internationalization support for ticks labels.
    Defined in: options.js.
    // Here, locale is disabled in general, but enabled for the horizontal
    // axis and the infobox.
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-0.5, 0.5, 0.5, -0.5],
        intl: {
            enabled: false,
            locale: 'de-DE'
        },
        keepaspectratio: true,
        axis: true,
        defaultAxes: {
            x: {
                ticks: {
                    intl: {
                            enabled: true,
                            options: {
                                style: 'unit',
                                unit: 'kilometer-per-hour',
                                unitDisplay: 'narrow'
                            }
                    }
                }
            },
            y: {
                ticks: {
                }
            }
        },
        infobox: {
            fontSize: 12,
            intl: {
                enabled: true,
                options: {
                    minimumFractionDigits: 4,
                    maximumFractionDigits: 5
                }
            }
        }
    });
    
    var p = board.create('point', [0.1, 0.1], {});
    
    
    
    					
    					
    
    						
    						
    						
    							
    See:
    JXG.Board#intl
    Text#intl
    Default Value:
    {
       enabled: 'inherit',
       options: {}
    }

    {Object} label
    Attributes for the ticks labels
    Defined in: options.js.
    Default Value:
    {}

    {Array} labels
    User defined labels for special ticks. Instead of the i-th tick's position, the i-th string stored in this array is shown. If the number of strings in this array is less than the number of special ticks, the tick's position is shown as a fallback.
    Defined in: options.js.
    Default Value:
    []

    {Number} majorHeight
    Total height of a major tick. If negative the full height of the board is taken.
    Defined in: options.js.
    Default Value:
    10

    {Array} majorTickEndings
    Decides in which direction major ticks are visible. Possible values are either the constants 0=false or 1=true or a function returning 0 or 1. In case of [0,1] the tick is only visible to the right of the line. In case of [1,0] the tick is only visible to the left of the line.
    Defined in: options.js.
            var board = JXG.JSXGraph.initBoard("jxgbox", {
                boundingbox: [-5, 5, 5, -5],
                axis: true,
                defaultAxes: {
                    x: {
                        ticks: {
                            majorTickEndings: [1, 0],
                            ignoreInfiniteTickEndings: false
                        }
                    },
                    y: {
                        ticks: {
                            majorTickEndings: [0, 1],
                            ignoreInfiniteTickEndings: false
                        }
                    }
                }
            });
    
            var p = board.create('point', [1, 1]);
            var l = board.create('line', [1, -1, 1]);
    
    
    
    					
    					
    
    						
    						
    						
    							
    See:
    Ticks#tickEndings
    Ticks#ignoreInfiniteTickEndings
    Default Value:
    [1, 1]

    {Number} maxLabelLength
    The maximum number of characters a tick label can use.
    Defined in: options.js.
    See:
    Ticks#digits
    Default Value:
    5

    {Number} minorHeight
    Total height of a minor tick. If negative the full height of the board is taken.
    Defined in: options.js.
    Default Value:
    4

    {Number} minorTicks
    The number of minor ticks between two major ticks.
    Defined in: options.js.
    Default Value:
    4

    {Number} minTicksDistance
    Minimum distance in pixel of equidistant ticks in case insertTicks==true.
    Defined in: options.js.
    See:
    Ticks#insertTicks
    Default Value:
    10

    {Number} precision
    If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label. Deprecated! Replaced by the attribute digits.
    Defined in: options.js.
    See:
    Ticks#maxLabelLength
    Ticks#digits
    Default Value:
    3

    {Number} scale
    Scale the ticks but not the tick labels.
    Defined in: options.js.
    const board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-10, 10, 10, -10], axis: true,
        defaultAxes: {
            x : {
                    margin: -4,
                    ticks: {
                        minTicksDistance: 0,
                        minorTicks:4,
                        ticksDistance: 3,
                        scale: Math.PI,
                        scaleSymbol: 'π',
                        insertTicks: true
                    }
                 },
            y : {}
        }
    });
    
    
    
    					
    					
    
    						
    						
    						
    							
    See:
    Ticks#scaleSymbol
    Default Value:
    1

    {String} scaleSymbol
    A string that is appended to every tick, used to represent the scale factor given in Ticks#scale.
    Defined in: options.js.
    See:
    Ticks#scale
    Default Value:
    ''

    {Array} tickEndings
    Decides in which direction minor ticks are visible. Possible values are either the constants 0=false or 1=true or a function returning 0 or 1. In case of [0,1] the tick is only visible to the right of the line. In case of [1,0] the tick is only visible to the left of the line.
    Defined in: options.js.
    See:
    Ticks#majorTickEndings
    Default Value:
    [1, 1]

    {Number} ticksDistance
    The default distance (in user coordinates, not pixels) between two ticks. Please be aware that this value does not have to be used if Ticks#insertTicks is set to true.
    Defined in: options.js.
    See:
    Ticks#insertTicks
    Default Value:
    1

    ticksPerLabel
    By default, i.e. if ticksPerLabel==false, labels are generated for major ticks, only. If ticksPerLabel is set to a(n integer) number, this denotes the number of minor ticks between two labels.
    Defined in: options.js.
    const board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-4, 4, 4, -4],
        axis: true,
        defaultAxes: {
            x: {
                ticks: {
                    minorTicks: 7,
                    ticksPerLabel: 4,
                    minorHeight: 20,
                }
            },
            y: {
                ticks: {
                    minorTicks: 3,
                    ticksPerLabel: 2,
                    minorHeight: 20
                }
            }
        }
    });
    
    
    
    					
    					
    
    						
    						
    						
    						
    							
    Default Value:
    false

    {String} type
    Set the ticks type. Possible values are 'linear' or 'polar'.
    Defined in: options.js.
    var ax = board.create('axis', [[0,0], [1,0]], {
                 needsRegularUpdate: false,
                 ticks: {
                         type: 'linear',
                         majorHeight: 0
                     }
                 });
    var ay = board.create('axis', [[0,0], [0,1]], {
                 ticks: {
                         type: 'polar'
                     }
                 });
    
    var p = board.create('point', [3, 2]);
    
    
    
    					
    					
    
    						
    						
    						
    						
    							
    Default Value:
    'linear'

    {Boolean} useUnicodeMinus
    Use the unicode character 0x2212, i.e. the HTML entity &minus; as minus sign. That is −1 instead of -1.
    Defined in: options.js.
    Default Value:
    true

    Attributes borrowed from other Elements
    Attributes borrowed from class JXG.GeometryElement:
    dash, dashScale, draft, dragToTopOfLayer, 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, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, visible, withLabel

    Fields borrowed from other Elements
    Fields borrowed from class JXG.Ticks:
    board, equidistant, fixedTicks, labelCounter, labelsData, line, ticks
    Fields borrowed from class JXG.GeometryElement:
    _org_type, _pos, ancestors, baseElement, 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, visProp, visPropCalc

    Methods borrowed from other Elements
    Methods borrowed from class JXG.Ticks:
    _isInsideCanvas, beautifyScientificNotationLabel, calculateTicksCoordinates, createTickPath, formatLabelText, generateEquidistantTicks, generateFixedTicks, generateLabelData, getDistanceFromZero, getDistanceMajorTicks, getLowerAndUpperBounds, getXandYdeltas, getZeroCoordinates, hasPoint, processTickPosition, setPositionDirectly, setTicksSizeVariables, update, updateRenderer, updateRendererLabels
    Methods borrowed from class JXG.GeometryElement:
    _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, 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, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale

    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 Mar 08 2024 12:21:03 GMT+0100 (Mitteleuropäische Normalzeit)