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.

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

Element Summary
Constructor Attributes	Constructor Name and Description
	Ticks Ticks are markers on straight line elements or curves.

Attributes Summary
Field Attributes	Field Name and Description
	anchor Determine the position of the tick with value 0.
	beautifulScientificTickLabels Format tick labels that were going to have scientific notation like 5.00e+6 to look like 5•10⁶.
	digits If a label exceeds Ticks#maxLabelLength this determines the number of digits used to shorten the tick label.
	drawLabels Draw labels yes/no
	drawZero Draw the zero tick, that lies at line.point1?
	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).
<deprecated>	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).
	ignoreInfiniteTickEndings If true, ignore the tick endings attribute for infinite (full height) ticks.
	includeBoundaries Whether line boundaries should be counted or not in the lower and upper bounds when creating ticks.
	insertTicks If the distance between two ticks is too big we could insert new ticks.
	label Attributes for the ticks labels
	labels User defined labels for special ticks.
	majorHeight Total height of a major tick.
	majorTickEndings Decides in which direction major ticks are visible.
	maxLabelLength The maximum number of characters a tick label can use.
	minorHeight Total height of a minor tick.
	minorTicks The number of minor ticks between two major ticks.
	minTicksDistance Minimum distance in pixel of equidistant ticks in case insertTicks==true.
	precision If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label.
	scale Scale the ticks but not the tick labels.
	scaleSymbol A string that is appended to every tick, used to represent the scale factor given in Ticks#scale.
	tickEndings Decides in which direction minor ticks are visible.
	ticksDistance The default distance (in user coordinates, not pixels) between two ticks.
	ticksPerLabel By default, i.e.
	type Set the ticks type.
	useUnicodeMinus Use the unicode character 0x2212, i.e.

Methods borrowed from class JXG.Ticks:: _isInsideCanvas, adjustTickDistance, beautifyScientificNotationLabel, calculateTicksCoordinates, createTickPath, formatLabelText, generateEquidistantTicks, generateFixedTicks, generateLabelData, getDistanceFromZero, getLowerAndUpperBounds, getXandYdeltas, getZeroCoordinates, hasPoint, makeTicksFunction, 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, 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, setProperty, show, showElement, snapToPoints, updateVisibility

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

Ticks are markers on straight line elements or curves.

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.
{Number|Array} distance: Number defining the distance between two major ticks or an array defining static ticks. In case a number is specified, the ticks are equidistant, in case of an array, a fixed number of static ticks is created at user-supplied positions. Alternatively, the distance can be specified with the attribute "ticksDistance". 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".

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

Examples:

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.

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.

Default Value:: false

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

{function} generateLabelValue

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 counted or not in the lower and upper bounds when creating ticks.
Defined in: options.js.

Default Value:: false

{Boolean} insertTicks

If the distance between two ticks is too big we could insert new ticks. If insertTicks is true, we'll do so, otherwise we leave the distance as is. This option is ignored if equidistant is false. In the example below the distance between two ticks is given as 1 but because insertTicks is set to true many ticks will be omitted in the rendering process to keep the display clear.
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, 1], {
     insertTicks: true,
     majorHeight: -1,
     label: {
         offset: [4, -9]
     },
     drawLabels: true
 });

See:: Ticks#minTicksDistance

Default Value:: false

{Object} label

Attributes for the ticks labels
Defined in: options.js.

{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#precision

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

minTicksDistance

Minimum distance in pixel of equidistant ticks in case insertTicks==true.
Defined in: options.js.

See:: Ticks#insertTicks

{Number} precision

If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label. Replaced by the digits attribute.
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.

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.

Default Value:: 'linear'

{Boolean} useUnicodeMinus

Use the unicode character 0x2212, i.e. the HTML entity − as minus sign. That is −1 instead of -1.
Defined in: options.js.

Default Value:: true

Attributes borrowed from other Elements

Fields borrowed from other Elements

Fields borrowed from class JXG.Ticks:: board, equidistant, fixedTicks, labelCounter, labelData, line, ticks, ticksDelta, ticksFunction
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, adjustTickDistance, beautifyScientificNotationLabel, calculateTicksCoordinates, createTickPath, formatLabelText, generateEquidistantTicks, generateFixedTicks, generateLabelData, getDistanceFromZero, getLowerAndUpperBounds, getXandYdeltas, getZeroCoordinates, hasPoint, makeTicksFunction, 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, 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, setProperty, show, showElement, snapToPoints, updateVisibility

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