interface Node {
    background-blacken?: PropertyValueNode<number>;
    background-clip?: PropertyValueNode<"none" | "clipped">;
    background-color?: PropertyValueNode<string>;
    background-fit?: PropertyValueNode<"none" | "contain" | "cover">;
    background-height?: PropertyValueNode<string | number>;
    background-height-relative-to?: PropertyValueNode<"inner" | "include-padding">;
    background-image?: PropertyValueNode<string>;
    background-image-containment?: PropertyValueNode<"inside" | "over">;
    background-image-crossorigin?: PropertyValueNode<"anonymous" | "use-credentials">;
    background-image-opacity?: PropertyValueNode<number>;
    background-image-smoothing?: PropertyValueNode<"yes" | "no">;
    background-offset-x?: PropertyValueNode<string | number>;
    background-offset-y?: PropertyValueNode<string | number>;
    background-opacity?: PropertyValueNode<number>;
    background-position-x?: PropertyValueNode<string | number>;
    background-position-y?: PropertyValueNode<string | number>;
    background-repeat?: PropertyValueNode<
        | "repeat"
        | "no-repeat"
        | "repeat-x"
        | "repeat-y">;
    background-width?: PropertyValueNode<string | number>;
    background-width-relative-to?: PropertyValueNode<"inner" | "include-padding">;
    backgroundColor?: PropertyValueNode<string>;
    border-color?: PropertyValueNode<string>;
    border-opacity?: PropertyValueNode<number>;
    border-style?: PropertyValueNode<LineStyle>;
    border-width?: PropertyValueNode<string | number>;
    bounds-expansion?: PropertyValueNode<
        | string
        | number
        | [string | number, string | number]
        | [string | number, string | number, string | number, string | number]>;
    color?: PropertyValue<NodeSingular, string>;
    content?: PropertyValueNode<string>;
    display?: PropertyValue<NodeSingular, "none" | "element">;
    events?: PropertyValue<NodeSingular, "yes" | "no">;
    font-family?: PropertyValue<NodeSingular, string>;
    font-size?: PropertyValue<NodeSingular, string | number>;
    font-style?: PropertyValue<NodeSingular, FontStyle>;
    font-weight?: PropertyValue<NodeSingular, FontWeight>;
    ghost?: PropertyValueNode<"yes" | "no">;
    ghost-offset-x?: PropertyValueNode<number>;
    ghost-offset-y?: PropertyValueNode<number>;
    ghost-opacity?: PropertyValueNode<number>;
    height?: PropertyValueNode<string | number>;
    label?: PropertyValue<NodeSingular, string>;
    line-height?: PropertyValue<NodeSingular, number>;
    min-zoomed-font-size?: PropertyValue<NodeSingular, number>;
    opacity?: PropertyValue<NodeSingular, number>;
    overlay-color?: PropertyValueEdge<string>;
    overlay-opacity?: PropertyValueEdge<number>;
    overlay-padding?: PropertyValueEdge<string | number>;
    padding-bottom?: PropertyValueNode<string>;
    padding-left?: PropertyValueNode<string>;
    padding-right?: PropertyValueNode<string>;
    padding-top?: PropertyValueNode<string>;
    pie-i-background-color?: PropertyValueNode<string>;
    pie-i-background-opacity?: PropertyValueNode<number>;
    pie-i-background-size?: PropertyValueNode<number>;
    pie-size?: PropertyValueNode<string>;
    shape?: PropertyValueNode<NodeShape>;
    shape-polygon-points?: PropertyValueNode<string>;
    source-label?: PropertyValue<NodeSingular, string>;
    source-text-margin-x?: PropertyValue<NodeSingular, number>;
    source-text-margin-y?: PropertyValue<NodeSingular, number>;
    source-text-offset?: PropertyValue<NodeSingular, number>;
    source-text-rotation?: PropertyValue<NodeSingular, number | "none" | "autorotate">;
    target-label?: PropertyValue<NodeSingular, string>;
    target-text-margin-x?: PropertyValue<NodeSingular, number>;
    target-text-margin-y?: PropertyValue<NodeSingular, number>;
    target-text-offset?: PropertyValue<NodeSingular, number>;
    target-text-rotation?: PropertyValue<NodeSingular, number | "none" | "autorotate">;
    text-background-color?: PropertyValue<NodeSingular, string>;
    text-background-opacity?: PropertyValue<NodeSingular, number>;
    text-background-padding?: PropertyValue<NodeSingular, string>;
    text-background-shape?: PropertyValue<NodeSingular, "rectangle" | "roundrectangle">;
    text-border-color?: PropertyValue<NodeSingular, string>;
    text-border-opacity?: PropertyValue<NodeSingular, number>;
    text-border-style?: PropertyValue<NodeSingular, LineStyle>;
    text-border-width?: PropertyValue<NodeSingular, number>;
    text-events?: PropertyValue<NodeSingular, "yes" | "no">;
    text-halign?: PropertyValue<NodeSingular, "center" | "left" | "right">;
    text-justification?: PropertyValue<NodeSingular,
        | "auto"
        | "center"
        | "left"
        | "right">;
    text-margin-x?: PropertyValue<NodeSingular, number>;
    text-margin-y?: PropertyValue<NodeSingular, number>;
    text-max-width?: PropertyValue<NodeSingular, string>;
    text-opacity?: PropertyValue<NodeSingular, number>;
    text-outline-color?: PropertyValue<NodeSingular, string>;
    text-outline-opacity?: PropertyValue<NodeSingular, number>;
    text-outline-width?: PropertyValue<NodeSingular, string | number>;
    text-overflow-wrap?: PropertyValue<NodeSingular, "whitespace" | "anywhere">;
    text-rotation?: PropertyValue<NodeSingular, number | "none" | "autorotate">;
    text-transform?: PropertyValue<NodeSingular, TextTranformation>;
    text-valign?: PropertyValue<NodeSingular, "center" | "top" | "bottom">;
    text-wrap?: PropertyValue<NodeSingular, "none" | "wrap" | "ellipsis">;
    transition-delay?: number;
    transition-duration?: number;
    transition-property?: string;
    transition-timing-function?: TransitionTimingFunction;
    visibility?: PropertyValue<NodeSingular, "hidden" | "visible">;
    width?: PropertyValueNode<string | number>;
    z-compound-depth?: PropertyValue<NodeSingular,
        | "auto"
        | "top"
        | "bottom"
        | "orphan">;
    z-index?: PropertyValue<NodeSingular, number>;
    z-index-compare?: PropertyValue<NodeSingular, "auto" | "manual">;
}

Hierarchy (view full)

Properties

background-blacken? background-clip? background-color? background-fit? background-height? background-height-relative-to? background-image? background-image-containment? background-image-crossorigin? background-image-opacity? background-image-smoothing? background-offset-x? background-offset-y? background-opacity? background-position-x? background-position-y? background-repeat? background-width? background-width-relative-to? backgroundColor? border-color? border-opacity? border-style? border-width? bounds-expansion? color? content? display? events? font-family? font-size? font-style? font-weight? ghost? ghost-offset-x? ghost-offset-y? ghost-opacity? height? label? line-height? min-zoomed-font-size? opacity? overlay-color? overlay-opacity? overlay-padding? padding-bottom? padding-left? padding-right? padding-top? pie-i-background-color? pie-i-background-opacity? pie-i-background-size? pie-size? shape? shape-polygon-points? source-label? source-text-margin-x? source-text-margin-y? source-text-offset? source-text-rotation? target-label? target-text-margin-x? target-text-margin-y? target-text-offset? target-text-rotation? text-background-color? text-background-opacity? text-background-padding? text-background-shape? text-border-color? text-border-opacity? text-border-style? text-border-width? text-events? text-halign? text-justification? text-margin-x? text-margin-y? text-max-width? text-opacity? text-outline-color? text-outline-opacity? text-outline-width? text-overflow-wrap? text-rotation? text-transform? text-valign? text-wrap? transition-delay? transition-duration? transition-property? transition-timing-function? visibility? width? z-compound-depth? z-index? z-index-compare?

Properties

background-blacken?: PropertyValueNode<number>

Blackens the node’s body for values from 0 to 1; whitens the node’s body for values from 0 to -1.

background-clip?: PropertyValueNode<"none" | "clipped">

How background image clipping is handled; may be node for clipped to node shape or none for no clipping.

background-color?: PropertyValueNode<string>

The colour of the node’s body.

background-fit?: PropertyValueNode<"none" | "contain" | "cover">

How the background image is fit to the node; may be none for original size, contain to fit inside node, or cover to cover the node.

background-height?: PropertyValueNode<string | number>

Specifies the height of the image. A percent value (e.g. 50%) may be used to set the image height relative to the node height. If used in combination with background- fit, then this value overrides the height of the image in calculating the fitting — thereby overriding the aspect ratio. The auto value is used by default, which uses the height of the image.

background-height-relative-to?: PropertyValueNode<"inner" | "include-padding">

Changes whether the height is calculated relative to the height of the node or the height in addition to the padding; may be inner or include-padding.

If not specified, include-padding is used by default.

background-image?: PropertyValueNode<string>

The URL that points to the image that should be used as the node’s background. PNG, JPG, and SVG are supported formats. You may use a data URI to use embedded images, thereby saving a HTTP request.

background-image-containment?: PropertyValueNode<"inside" | "over">

Determines whether background image is within (inside) or over top of the node (over).

The default is set to inside.

background-image-crossorigin?: PropertyValueNode<"anonymous" | "use-credentials">

All images are loaded with a crossorigin attribute which may be anonymous or use-credentials.

The default is set to anonymous.

background-image-opacity?: PropertyValueNode<number>

The opacity of the background image. [0 1]

background-image-smoothing?: PropertyValueNode<"yes" | "no">

Determines whether background image is smoothed (yes, default) or not (no). This is only a hint, and the browser may or may not respect the value set for this property.

background-offset-x?: PropertyValueNode<string | number>

The x offset of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-offset-y?: PropertyValueNode<string | number>

The y offset of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-opacity?: PropertyValueNode<number>

The opacity level of the node’s background colour.

background-position-x?: PropertyValueNode<string | number>

The x position of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-position-y?: PropertyValueNode<string | number>

The y position of the background image, measured in percent(e.g. '50%') or pixels (e.g. '10px').

background-repeat?: PropertyValueNode<
    | "repeat"
    | "no-repeat"
    | "repeat-x"
    | "repeat-y">

Whether to repeat the background image; may be no-repeat, repeat-x, repeat-y, or repeat.

background-width?: PropertyValueNode<string | number>

Specifies the width of the image. A percent value (e.g. 50%) may be used to set the image width relative to the node width. If used in combination with background- fit, then this value overrides the width of the image in calculating the fitting — thereby overriding the aspect ratio. The auto value is used by default, which uses the width of the image.

background-width-relative-to?: PropertyValueNode<"inner" | "include-padding">

Changes whether the width is calculated relative to the width of the node or the width in addition to the padding; may be inner or include-padding.

If not specified, include-padding is used by default.

backgroundColor?: PropertyValueNode<string>
border-color?: PropertyValueNode<string>

The colour of the node’s border.

border-opacity?: PropertyValueNode<number>

The opacity of the node’s border. A value between [0 1].

The style of the node’s border.

border-width?: PropertyValueNode<string | number>

The size of the node’s border.

bounds-expansion?: PropertyValueNode<
    | string
    | number
    | [string | number, string | number]
    | [string | number, string | number, string | number, string | number]>

Specifies a padding size (e.g. 20) that expands the bounding box of the node in all directions. This allows for images to be drawn outside of the normal bounding box of the node when background-clip is none. This is useful for small decorations just outside of the node.

bounds-expansions accepts 1 value (for all directions), 2 values, ([topAndBottom, leftAndRight]) or 4 values ([top, right, bottom, left]).

color?: PropertyValue<NodeSingular, string>

The colour of the element’s label.

content?: PropertyValueNode<string>

The CSS content field

display?: PropertyValue<NodeSingular, "none" | "element">

Whether to display the element; may be element for displayed or none for not displayed. Note that a "display: none" bezier edge does not take up space in its bundle.

events?: PropertyValue<NodeSingular, "yes" | "no">

Whether events should occur on an element (e.g.tap, mouseover, etc.).

  • For "no", the element receives no events and events simply pass through to the core/viewport.
font-family?: PropertyValue<NodeSingular, string>

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

font-size?: PropertyValue<NodeSingular, 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.

ghost?: PropertyValueNode<"yes" | "no">

Whether to use the ghost effect; may be yes or no.

ghost-offset-x?: PropertyValueNode<number>

The horizontal offset used to position the ghost effect.

ghost-offset-y?: PropertyValueNode<number>

The vertical offset used to position the ghost effect.

ghost-opacity?: PropertyValueNode<number>

The opacity of the ghost effect.

height?: PropertyValueNode<string | number>

The height of the node’s body. This property can take on the special value label so the height is automatically based on the node’s label.

label?: PropertyValue<NodeSingular, string>

The text to display for an element’s label.

line-height?: PropertyValue<NodeSingular, 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<NodeSingular, 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.

opacity?: PropertyValue<NodeSingular, number>

The opacity of the element, ranging from 0 to 1. Note that the opacity of a compound node parent affects the effective opacity of its children.

overlay-color?: PropertyValueEdge<string>

The colour of the overlay.

overlay-opacity?: PropertyValueEdge<number>

The opacity of the overlay.

overlay-padding?: PropertyValueEdge<string | number>

The area outside of the element within which the overlay is shown.

padding-bottom?: PropertyValueNode<string>
padding-left?: PropertyValueNode<string>
padding-right?: PropertyValueNode<string>
padding-top?: PropertyValueNode<string>
pie-i-background-color?: PropertyValueNode<string>

The colour of the node’s ith pie chart slice.

pie-i-background-opacity?: PropertyValueNode<number>

The opacity of the node’s ith pie chart slice.

pie-i-background-size?: PropertyValueNode<number>

The size of the node’s ith pie chart slice, measured in percent (e.g. 25% or 25).

pie-size?: PropertyValueNode<string>

The diameter of the pie, measured as a percent of node size (e.g. 100%) or an absolute length (e.g. 25px).

The shape of the node’s body.

shape-polygon-points?: PropertyValueNode<string>
source-label?: PropertyValue<NodeSingular, string>

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

source-text-margin-x?: PropertyValue<NodeSingular, number>

(For the source label of an edge.)

source-text-margin-y?: PropertyValue<NodeSingular, number>

(For the source label of an edge.)

source-text-offset?: PropertyValue<NodeSingular, number>

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

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

(For the source label of an edge.)

target-label?: PropertyValue<NodeSingular, string>

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

target-text-margin-x?: PropertyValue<NodeSingular, number>

(For the target label of an edge.)

target-text-margin-y?: PropertyValue<NodeSingular, number>

(For the target label of an edge.)

target-text-offset?: PropertyValue<NodeSingular, number>

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

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

(For the target label of an edge.)

text-background-color?: PropertyValue<NodeSingular, string>

A colour to apply on the text background.

text-background-opacity?: PropertyValue<NodeSingular, number>

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

text-background-padding?: PropertyValue<NodeSingular, string>

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

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

The shape to use for the label background.

text-border-color?: PropertyValue<NodeSingular, string>

The colour of the border around the label.

text-border-opacity?: PropertyValue<NodeSingular, number>

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

text-border-style?: PropertyValue<NodeSingular, LineStyle>

The style of the border around the label.

text-border-width?: PropertyValue<NodeSingular, number>

The width of the border around the label.

text-events?: PropertyValue<NodeSingular, "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<NodeSingular, "center" | "left" | "right">

The vertical alignment of a node’s label.

text-justification?: PropertyValue<NodeSingular,
    | "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<NodeSingular, number>

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

text-margin-y?: PropertyValue<NodeSingular, number>

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

text-max-width?: PropertyValue<NodeSingular, 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<NodeSingular, number>

The opacity of the label text, including its outline.

text-outline-color?: PropertyValue<NodeSingular, string>

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

text-outline-opacity?: PropertyValue<NodeSingular, number>

The opacity of the outline on label text.

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

The size of the outline on label text.

text-overflow-wrap?: PropertyValue<NodeSingular, "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<NodeSingular, 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<NodeSingular, "center" | "top" | "bottom">

The vertical alignment of a node’s label.

text-wrap?: PropertyValue<NodeSingular, "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
transition-delay?: number

The length of the delay in seconds before the transition occurs (e.g. 250ms).

transition-duration?: number

The length of the transition in seconds(e.g. 0.5s).

transition-property?: string

A comma separated list of style properties to animate in this state.

transition-timing-function?: TransitionTimingFunction

An easing function that controls the animation progress curve (a visualisation of easings serves as a reference).

visibility?: PropertyValue<NodeSingular, "hidden" | "visible">

Whether the element is visible; may be visible or hidden. Note that a "visibility : hidden" bezier edge still takes up space in its bundle.

width?: PropertyValueNode<string | number>

The width of the node’s body. This property can take on the special value label so the width is automatically based on the node’s label.

z-compound-depth?: PropertyValue<NodeSingular,
    | "auto"
    | "top"
    | "bottom"
    | "orphan">

May be bottom, orphan, auto (default), or top. The first drawn is bottom, the second is orphan, which is the same depth as the root of the compound graph, followed by the default of auto which draws in depth order from root to leaves of the compound graph. The last drawn is top. It does not usually make sense to set this value for non-compound graphs.

z-index?: PropertyValue<NodeSingular, number>

An integer value that affects the relative draw order of elements. In general, an element with a higher "z-index" will be drawn on top of an element with a lower "z-index". Note that edges are under nodes despite "z-index", except when necessary for compound nodes.

z-index-compare?: PropertyValue<NodeSingular, "auto" | "manual">

May be auto (default) or manual. The auto setting draws edges under nodes, whereas manual ignores this convention and draws solely based on the z-index value.