Ticks

Element

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:

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.
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:
- 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.
- 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 10^i\), where \(a\) is one of \({1, 2, 5}\) and the number \(a 10^i\) 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".

Usage (signatures)

board.create('ticks', [line, ticksopt]);

Parameters

Name	Type	Attributes	Description
`line`	Line \| Curve		The line or curve the ticks are going to be attached to.
`ticks`	Array	<optional>	Optional array of numbers. If given, a fixed number of static ticks is created at these user-supplied positions.

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]
        }
    }
});

Attributes

Own

anchor

beautifulScientificTickLabels

ignoreInfiniteTickEndings

anchor

Description

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.

Type

String

Default Value

'left'

Examples

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]
    }
});

Source

options.js, line 2979

beautifulScientificTickLabels

Description

Format tick labels that were going to have scientific notation like 5.00e+6 to look like 5•10⁶.

Type

Boolean

Default Value

false

Example

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
          },
        }
    },
});

Source

options.js, line 2910

digits

Description

If a label exceeds Ticks#maxLabelLength this determines the number of digits used to shorten the tick label.

Type

Number

Deprecated

Yes

Default Value

See

Ticks#maxLabelLength

Source

options.js, line 3479

drawLabels

Description: Draw labels yes/no
Type: Boolean
Default Value: false
Source: options.js, line 2880

drawZero

Description

Draw the zero tick, that lies at line.point1?

Type

Boolean

Default Value

false

Example

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]
    }
});

Source

options.js, line 3066

face

Description

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.

Type

String

Default Value

'|'

See

Hatch

Example

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});

Source

options.js, line 3504

generateLabelText

Description

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.

Type

function

Overrides

JXG.Ticks#generateLabelText

Examples

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 by defining the function generateLabelText directly.
board.defaultAxes.y.ticks[0].generateLabelText = function (tick, zero) {
    var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2]));
    return this.formatLabelText(value);
};

Generate a logarithmic labelling of the vertical axis by setting the attribute generateLabelText

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: {
      ticks: {
        // Generate a logarithmic labelling of the vertical axis.
        generateLabelText: function (tick, zero) {
          var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2]));
          return this.formatLabelText(value);
        }
      }
    }
  }
});

Source

options.js, line 2740

generateLabelValue

Description: 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).
Type: function
Deprecated: Use JGX.Options#generateLabelText
Source: options.js, line 2869

ignoreInfiniteTickEndings

Description

If true, ignore the tick endings attribute for infinite (full height) ticks. This affects major and minor ticks.

Type

Boolean

Default Value

true

See

Source

options.js, line 3292

includeBoundaries

Description

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

Type

Boolean

Default Value

false

Example

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]
    }
});

Source

options.js, line 3544

insertTicks

Description

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

Type

Boolean

Default Value

false

See

Example

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
 });

Source

options.js, line 3139

intl

Description

Internationalization support for ticks labels.

Default Value

{
   enabled: 'inherit',
   options: {}
}

See

Example

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], {});

Source

options.js, line 3666

label

Description

Attributes for the ticks labels.

Type

Object

Default Value

{
  tabindex: null,
  layer: 7, // line
  highlight: false
}

Source

options.js, line 2890

labels

Description: 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.
Type: Array
Overrides: JXG.Ticks#labels
Default Value: []
Source: options.js, line 3442

majorHeight

Description: Total height of a major tick. If negative the full height of the board is taken.
Type: Number
Default Value: 10
Source: options.js, line 3198

majorTickEndings

Description

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.

Type

Array

Default Value

[1, 1]

See

Example

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]);

Source

options.js, line 3223

maxLabelLength

Description

The maximum number of characters a tick label can use.

Type

Number

Default Value

See

Ticks#digits

Source

options.js, line 3454

minTicksDistance

Description

Minimum distance in pixel of equidistant ticks in case insertTicks==true.

Type

Number

Default Value

See

Ticks#insertTicks

Source

options.js, line 3178

minorHeight

Description: Total height of a minor tick. If negative the full height of the board is taken.
Type: Number
Default Value: 4
Source: options.js, line 3188

minorTicks

Description: The number of minor ticks between two major ticks.
Type: Number
Default Value: 4
Source: options.js, line 3305

precision

Description

If a label exceeds Ticks#maxLabelLength this determines the precision used to shorten the tick label. Deprecated! Replaced by the attribute digits.

Type

Number

Overrides

JXG.Ticks#precision

Deprecated

Yes

Default Value

See

Source

options.js, line 3465

scale

Description

Scale the ticks but not the tick labels.

Type

Number

Default Value

See

Ticks#scaleSymbol

Example

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 : {}
    }
});

Source

options.js, line 3376

scaleSymbol

Description

A string that is appended to every tick, used to represent the scale factor given in Ticks#scale.

Type

String

Default Value

See

Ticks#scale

Source

options.js, line 3430

tickEndings

Description

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.

Type

Array

Default Value

[1, 1]

See

Ticks#majorTickEndings

Source

options.js, line 3208

ticksDistance

Description

The default distance (in user coordinates, not pixels) between two ticks. Please be aware that this value is overruled if Ticks#insertTicks is set to true. In case, Ticks#insertTicks is false, the maximum number of ticks is hard coded to be less than 2048.

Type

Number

Default Value

See

Ticks#insertTicks

Source

options.js, line 3491

ticksPerLabel

Description

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.

Type

Number | Boolean

Default Value

false

Example

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
            }
        }
    }
});

Source

options.js, line 3314

type

Description

Set the ticks type. Possible values are 'linear' or 'polar'.

Type

String

Overrides

JXG.Ticks#type

Default Value

'linear'

Example

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]);

Source

options.js, line 3624

useUnicodeMinus

Description: Use the unicode character 0x2212, i.e. the HTML entity − as minus sign. That is −1 instead of -1.
Type: Boolean
Default Value: true
Source: options.js, line 2968