interface Labels<SingularType> {
    color: PropertyValue<SingularType, string>;
    font-family: PropertyValue<SingularType, string>;
    font-size: PropertyValue<SingularType, string | number>;
    font-style: PropertyValue<SingularType, FontStyle>;
    font-weight: PropertyValue<SingularType, FontWeight>;
    label: PropertyValue<SingularType, string>;
    line-height: PropertyValue<SingularType, number>;
    min-zoomed-font-size: PropertyValue<SingularType, number>;
    source-label: PropertyValue<SingularType, string>;
    source-text-margin-x: PropertyValue<SingularType, number>;
    source-text-margin-y: PropertyValue<SingularType, number>;
    source-text-offset: PropertyValue<SingularType, number>;
    source-text-rotation: PropertyValue<SingularType, number | "none" | "autorotate">;
    target-label: PropertyValue<SingularType, string>;
    target-text-margin-x: PropertyValue<SingularType, number>;
    target-text-margin-y: PropertyValue<SingularType, number>;
    target-text-offset: PropertyValue<SingularType, number>;
    target-text-rotation: PropertyValue<SingularType, number | "none" | "autorotate">;
    text-background-color: PropertyValue<SingularType, string>;
    text-background-opacity: PropertyValue<SingularType, number>;
    text-background-padding: PropertyValue<SingularType, string>;
    text-background-shape: PropertyValue<SingularType, "rectangle" | "roundrectangle">;
    text-border-color: PropertyValue<SingularType, string>;
    text-border-opacity: PropertyValue<SingularType, number>;
    text-border-style: PropertyValue<SingularType, LineStyle>;
    text-border-width: PropertyValue<SingularType, number>;
    text-events: PropertyValue<SingularType, "yes" | "no">;
    text-halign: PropertyValue<SingularType, "center" | "left" | "right">;
    text-justification: PropertyValue<SingularType,
        | "auto"
        | "center"
        | "left"
        | "right">;
    text-margin-x: PropertyValue<SingularType, number>;
    text-margin-y: PropertyValue<SingularType, number>;
    text-max-width: PropertyValue<SingularType, string>;
    text-opacity: PropertyValue<SingularType, number>;
    text-outline-color: PropertyValue<SingularType, string>;
    text-outline-opacity: PropertyValue<SingularType, number>;
    text-outline-width: PropertyValue<SingularType, string | number>;
    text-overflow-wrap: PropertyValue<SingularType, "whitespace" | "anywhere">;
    text-rotation: PropertyValue<SingularType, number | "none" | "autorotate">;
    text-transform: PropertyValue<SingularType, TextTranformation>;
    text-valign: PropertyValue<SingularType, "center" | "top" | "bottom">;
    text-wrap: PropertyValue<SingularType, "none" | "wrap" | "ellipsis">;
}

Type Parameters

Properties

color: PropertyValue<SingularType, string>

The colour of the element’s label.

font-family: PropertyValue<SingularType, string>

A comma-separated list of font names to use on the label text.

font-size: PropertyValue<SingularType, string | number>

A CSS font style to be applied to the label text. https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

A CSS font weight to be applied to the label text.

label: PropertyValue<SingularType, string>

The text to display for an element’s label.

line-height: PropertyValue<SingularType, number>

The line height of multiline text, as a relative, unitless value. It specifies the vertical spacing between each line. With value 1 (default), the lines are stacked directly on top of one another with no additional whitespace between them. With value 2, for example, there is whitespace between each line equal to the visible height of a line of text.

min-zoomed-font-size: PropertyValue<SingularType, number>

If zooming makes the effective font size of the label smaller than this, then no label is shown.Note that because of performance optimisations, the label may be shown at font sizes slightly smaller than this value.

This effect is more pronounced at larger screen pixel ratios.However, it is guaranteed that the label will be shown at sizes equal to or greater than the value specified.

source-label: PropertyValue<SingularType, string>

The text to display for an edge’s source label.

source-text-margin-x: PropertyValue<SingularType, number>

(For the source label of an edge.)

source-text-margin-y: PropertyValue<SingularType, number>

(For the source label of an edge.)

source-text-offset: PropertyValue<SingularType, number>

For the source label of an edge, how far from the source node the label should be placed.

source-text-rotation: PropertyValue<SingularType, number | "none" | "autorotate">

(For the source label of an edge.)

target-label: PropertyValue<SingularType, string>

The text to display for an edge’s target label.

target-text-margin-x: PropertyValue<SingularType, number>

(For the target label of an edge.)

target-text-margin-y: PropertyValue<SingularType, number>

(For the target label of an edge.)

target-text-offset: PropertyValue<SingularType, number>

For the target label of an edge, how far from the target node the label should be placed.

target-text-rotation: PropertyValue<SingularType, number | "none" | "autorotate">

(For the target label of an edge.)

text-background-color: PropertyValue<SingularType, string>

A colour to apply on the text background.

text-background-opacity: PropertyValue<SingularType, number>

The opacity of the label background; the background is disabled for 0 (default value).

text-background-padding: PropertyValue<SingularType, string>

The padding provides visual spacing between the text and the edge of the background.

text-background-shape: PropertyValue<SingularType, "rectangle" | "roundrectangle">

The shape to use for the label background.

text-border-color: PropertyValue<SingularType, string>

The colour of the border around the label.

text-border-opacity: PropertyValue<SingularType, number>

The width of the border around the label; the border is disabled for 0 (default value).

text-border-style: PropertyValue<SingularType, LineStyle>

The style of the border around the label.

text-border-width: PropertyValue<SingularType, number>

The width of the border around the label.

text-events: PropertyValue<SingularType, "yes" | "no">

Whether events should occur on an element if the label receives an event; may be yes or no. You may want a style applied to the text on active so you know the text is activatable.

text-halign: PropertyValue<SingularType, "center" | "left" | "right">

The vertical alignment of a node’s label.

text-justification: PropertyValue<SingularType,
    | "auto"
    | "center"
    | "left"
    | "right">

The justification of multiline (wrapped) labels; may be left, center, right, or auto (default). The auto value makes it so that a node’s label is justified along the node — e.g. a label on the right side of a node is left justified.

text-margin-x: PropertyValue<SingularType, number>

A margin that shifts the label along the x- axis.

text-margin-y: PropertyValue<SingularType, number>

A margin that shifts the label along the y- axis.

text-max-width: PropertyValue<SingularType, string>

The maximum width for wrapped text, applied when "text-wrap" is set to wrap. For only manual newlines (i.e.\n), set a very large value like 1000px such that only your newline characters would apply.

text-opacity: PropertyValue<SingularType, number>

The opacity of the label text, including its outline.

text-outline-color: PropertyValue<SingularType, string>

The colour of the outline around the element’s label text.

text-outline-opacity: PropertyValue<SingularType, number>

The opacity of the outline on label text.

text-outline-width: PropertyValue<SingularType, string | number>

The size of the outline on label text.

text-overflow-wrap: PropertyValue<SingularType, "whitespace" | "anywhere">

The characters that may be used for possible wrapping locations when a line overflows text-max-width; may be whitespace (default) or anywhere. Note that anywhere is suited to CJK, where the characters are in a grid and no whitespace exists. Using anywhere with text in the Latin alphabet, for example, will split words at arbitrary locations.

text-rotation: PropertyValue<SingularType, number | "none" | "autorotate">

A rotation angle that is applied to the label.

  • Rotations are clockwise.
  • For edges, the special value autorotate can be used to align the label to the edge.
  • For nodes, the label is rotated along its anchor point on the node, so a label margin may help for some usecases.
  • The special value none can be used to denote 0deg.
  • Rotations works best with left-to-right text.

A transformation to apply to the label text.

text-valign: PropertyValue<SingularType, "center" | "top" | "bottom">

The vertical alignment of a node’s label.

text-wrap: PropertyValue<SingularType, "none" | "wrap" | "ellipsis">

A wrapping style to apply to the label text; may be

  • "none" for no wrapping (including manual newlines ) or
  • "wrap" for manual and/ or autowrapping.
  • "ellipsis" to truncate the string and append