Label

Attributes

Own

autoPosition

autoPositionMaxDistance

autoPositionMinDistance

autoPositionWhitelist

distance

offset

position

autoPosition

Description

Automatic position of label text. When called first, the positioning algorithm starts at the position defined by offset. The algorithm tries to find a position with the least number of overlappings with other elements, while retaining the distance to the anchor element.

Type

Boolean

Default Value

false

See

Example

var p1 = board.create('point', [-2, 1], {id: 'A'});
	var p2 = board.create('point', [-0.85, 1], {
     name: 'B', id: 'B', label:{autoPosition: true, offset:[10, 10]}
 });
	var p3 = board.create('point', [-1, 1.2], {
     name: 'C', id: 'C', label:{autoPosition: true, offset:[10, 10]}
 });
 var c = board.create('circle', [p1, p2]);
	var l = board.create('line', [p1, p2]);

Source

options.js, line 6912

autoPositionMaxDistance

Description

The auto position algorithm tries to put a label to a conflict-free position around it's anchor element. For this, the algorithm tests 12 positions around the anchor element up to a distance from the anchor defined here (in pixel).

Type

Number

Default Value

See

Source

options.js, line 6976

autoPositionMinDistance

Description

The auto position algorithm tries to put a label to a conflict-free position around it's anchor element. For this, the algorithm tests 12 positions around the anchor element starting at a distance from the anchor defined here (in pixel).

Type

Number

Default Value

See

Source

options.js, line 6959

autoPositionWhitelist

Description

List of object ids which should be ignored on setting automatic position of label text.

Type

Array

Default Value

[]

See

Source

options.js, line 6993

distance

Description

Distance of the label from a path element, like line, circle, curve. The true distance is this value multiplied by 0.5 times the size of the bounding box of the label text. That means, with a value of 1 the label will touch the path element.

Type

Number

Default Value

1.5

See

Label#position

Source

options.js, line 6886

offset

Description

Label offset from label anchor. The label anchor is determined by Label#position

Type

Array

Default Value

[10,10]

See

Label#position

Source

options.js, line 6900

position

Description

Point labels are positioned by setting Text#anchorX, Text#anchorY and Label#offset. For line, circle and curve elements (and their derived objects) there are two possibilities to position labels.

The first (old) possibility uses the MetaPost system: Possible string values for the position of a label for label anchor points are:
- 'first' (lines only)
- 'last' (lines only)
- 'lft'
- 'rt'
- 'top'
- 'bot'
- 'ulft'
- 'urt'
- 'llft'
- 'lrt'
the second (preferred) possibility (since v1.9.0) is: with position: 'len side' the label can be positioned exactly along the element's path. Here,
- 'len' is an expression of the form
  - xfr, denoting a fraction of the whole. x is expected to be a number between 0 and 1.
  - x%, a percentage. x is expected to be a number between 0 and 100.
  - x, a number: only possible for line elements and circles. For lines, the label is positioned x user units from the starting point. For circles, the number is interpreted as degree, e.g. 45°. For everything else, 0 is taken instead.
  - xpx, a pixel value: only possible for line elements. The label is positioned x pixels from the starting point. For non-lines, 0% is taken instead.
  If the domain of a curve is not connected, a position of the label close to the line between the first and last point of the curve is chosen.
- 'side' is either 'left' or 'right'. The label is positioned to the left or right of the path, when moving from the first point to the last. For circles, 'left' means inside of the circle, 'right' means outside of the circle. The distance of the label from the path can be controlled by Label#distance.

Recommended for this second possibility is to use anchorX: 'middle' and 'anchorY: 'middle'.

Type

String

Overrides

JXG.Text#position

Default Value

'urt'

See

Examples

var l1 = board.create('segment', [[-3, 2], [3, 2]], {
    name: 'l_1',
    withLabel: true,
    point1: { visible: true, name: 'A', withLabel: true },
    point2: { visible: true, name: 'B', withLabel: true },
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        distance: 1.2,
        position: '0.2fr left'
    }
});

var c1 = board.create('circle', [[0, 0], 3], {
    name: 'c_1',
    withLabel: true,
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        fontSize: 32,
        distance: 1.5,
        position: '50% right'
    }
});

var cu1 = board.create('functiongraph', ['3 * sin(x)', -3, 3], {
    name: 'cu_1',
    withLabel: true,
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        distance: 2,
        position: '0.8fr right'
    }
});

var A = board.create('point', [-1, 4]);
var B = board.create('point', [-1, -4]);
var C = board.create('point', [1, 1]);
var cu2 = board.create('ellipse', [A, B, C], {
    name: 'cu_2',
    withLabel: true,
    label: {
        anchorX: 'middle',
        anchorY: 'middle',
        offset: [0, 0],
        fontSize: 20,
        distance: 1.5,
        position: '75% right'
    }
});

Source