Axis - Documentation

Usage (signatures)

board.create('axis', [point1, point2]);

Parent elements can be two elements either of type JXG.Point or array of numbers describing the coordinates of a point. In the latter case, the point will be constructed automatically as a fixed invisible point.

Parameters

Name	Type	Description
`point1`	PointLike	First point
`point2`	PointLike	Second point

Examples

// Create an axis providing two coordinate pairs.
var l1 = board.create('axis', [[0.0, 1.0], [1.0, 1.3]]);

// Create ticks labels as fractions
board.create('axis', [[0,1], [1,1]], {
    ticks: {
        drawZero: true,
        label: {
            toFraction: true,
            useMathjax: false,
            anchorX: 'middle',
            offset: [0, -10]
        }
    }
});

board.create('axis', [a, b, c]);

An axis can also be created providing three numbers. The line is defined as the set of solutions of the equation $a\cdot z+b \cdot x+c\cdot y = 0$, i.e. a point $(z,x, y)$ is on the axis line $(a,b,c)$ if and only if $a\cdot z+b \cdot x+c\cdot y = 0$. In JSXGraph, for all finite points, z is normalized to the value 1.

Parameters

Name	Type	Description
`a`	number \| function
`b`	number \| function
`c`	number \| function

Attributes

Own

ticksAutoPosThreshold

withTicks

anchor

Description

Position is used in cases: position=='sticky' or position=='fixed'. Possible values are 'right', 'left', 'right left'. Left and right indicate the side as seen from the axis. It is used in combination with the attribute position to decide on which side of the board the axis should stick or be fixed.

Type

String

Default Value

Example

board.create('axis', [[0,0],[0,1]],{
     position: 'fixed',
     anchor: 'left',
     anchorDist: 2,
     strokeColor : 'green',
     ticks: {
         majorHeight: 7,
         drawZero: true,
     }
 });

 board.create('axis', [[0,0],[0,1]], {
     position: 'fixed',
     anchor: 'right',
     anchorDist: 2,
     strokeColor : 'blue',
     ticks: {
         majorHeight: 7,
         drawZero: true,
     }
 });

 board.create('axis', [[0,0],[0,-1]], {
     position: 'fixed',
     anchor: 'left',
     anchorDist: 4,
     strokeColor : 'red',
     ticks:{
         majorHeight: 7,
         drawZero: true,
     }
 });

Source

options.js, line 4389

anchorDist

Description

Used to define at which distance to the edge of the board the axis should stick or be fixed. This only has an effect if position=='sticky' or position=='fixed'. There are the following possibilities:

Numbers or strings which are numbers (e.g. '10') are interpreted as usrCoords.
Strings with the unit 'px' are interpreted as screen pixels.
Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)

Type

Number | String

Default Value

'10%'

Source

options.js, line 4477

label

Description: Attributes for the axis label.
Type: Label
Source: options.js, line 4637

point1

Description: Attributes for first point the axis.
Type: Point
Overrides: JXG.Line#point1
Source: options.js, line 4611

point2

Description: Attributes for second point the axis.
Type: Point
Overrides: JXG.Line#point2
Source: options.js, line 4623

position

Description

Is used to define the behavior of the axis. Settings in this attribute only have an effect if the axis is exactly horizontal or vertical. Possible values are:

'static': Standard behavior of the axes as know in JSXGraph.
'fixed': The axis is placed in a fixed position. Depending on the attribute anchor, it is positioned to the right or left of the edge of the board as seen from the axis with a distance defined in distanceBoarder. The axis will stay at the given position, when the user navigates through the board.
'sticky': This mixes the two settings static and fixed. When the user navigates in the board, the axis remains in the visible area (taking into account anchor and anchorDist). If the axis itself is in the visible area, the axis can be moved by navigation.

Type

String

Default Value

'static'

See

Examples

position: use navigation to see effect

 var axis1, axis2, circle;

 board.create('axis', [[0,0],[1,0]],{
     position: 'fixed',
     anchor: 'right',
     anchorDist: '0.1fr'
 });

 board.create('axis', [[0,0],[0,1]], {
     position: 'fixed',
     anchor: 'left',
     anchorDist: 1
 });

position: use navigation to see effect

     board.create('axis', [[0,0],[1,0]],{
         position: 'sticky',
         anchor: 'right',
         anchorDist: '0.2fr'
     });

     board.create('axis', [[0,0],[0,1]], {
         position: 'sticky',
         anchor: 'right left',
         anchorDist: '75px'
     });

Source

options.js, line 4296

ticks

Description: Attributes for ticks of the axis.
Type: Ticks
Overrides: JXG.Line#ticks
Source: options.js, line 4577

ticksAutoPos

Description

If set to true, the tick labels of the axis are automatically positioned in the narrower area between the axis and the side of the board. Settings in this attribute only have an effect if the axis is exactly horizontal or vertical. This option overrides offset, anchorX and anchorY of axis tick labels.

Type

Boolean

Default Value

false

Example

ticksAutoPos: use navigation to see effect

board.create('axis', [[0, 0], [1, 0]], {
    position: 'sticky',
    anchor: 'left right',
    anchorDist: '0.1',
    ticksAutoPos: true,
});

board.create('axis', [[0, 0], [0, 1]], {
    position: 'sticky',
    anchor: 'left right',
    anchorDist: '0.1',
    ticksAutoPos: true,
});

Source

options.js, line 4494

ticksAutoPosThreshold

Description

Defines, when ticksAutoPos takes effect. There are the following possibilities:

Numbers or strings which are numbers (e.g. '10') are interpreted as usrCoords.
Strings with the unit 'px' are interpreted as screen pixels.
Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)

Type

Number | String

Default Value

'5%'

Source