These properties affect the styling of an edge’s line:

http://js.cytoscape.org/#style/edge-line

interface EdgeLine {
    curve-style?: PropertyValueEdge<
        | "segments"
        | "haystack"
        | "straight"
        | "bezier"
        | "unbundled-bezier"
        | "taxi">;
    line-cap?: PropertyValueEdge<"square" | "butt" | "round">;
    line-color?: PropertyValueEdge<string>;
    line-dash-offset?: PropertyValueEdge<number>;
    line-dash-pattern?: PropertyValueEdge<number>[];
    line-fill?: PropertyValueEdge<"solid" | "linear-gradient" | "radial-gradient">;
    line-opacity?: PropertyValueEdge<number>;
    line-style?: PropertyValueEdge<LineStyle>;
    source-distance-from-node?: PropertyValueEdge<number>;
    target-distance-from-node?: PropertyValueEdge<number>;
    width?: PropertyValueEdge<string | number>;
}

Hierarchy (view full)

Properties

curve-style?: PropertyValueEdge<
    | "segments"
    | "haystack"
    | "straight"
    | "bezier"
    | "unbundled-bezier"
    | "taxi">

The curving method used to separate two or more edges between two nodes; may be

  • haystack (default, very fast, bundled straight edges for which loops and compounds are unsupported),
  • bezier(bundled curved edges),
  • unbundled - bezier(curved edges for use with manual control points), or
  • segments (a series of straight lines). Note that haystack edges work best with ellipse, rectangle, or similar nodes. Smaller node shapes, like triangle, will not be as aesthetically pleasing. Also note that edge arrows are unsupported for haystack edges.
line-cap?: PropertyValueEdge<"square" | "butt" | "round">

The cap of the edge's line.

line-color?: PropertyValueEdge<string>

The colour of the edge’s line.

line-dash-offset?: PropertyValueEdge<number>

The dashed line offset.

line-dash-pattern?: PropertyValueEdge<number>[]

The dashed line pattern which specifies alternating lengths of lines and gaps.

line-fill?: PropertyValueEdge<"solid" | "linear-gradient" | "radial-gradient">

The filling style of the edge's line.

line-opacity?: PropertyValueEdge<number>

The opacity of the edge’s line and arrow. Useful if you wish to have a separate opacity for the edge label versus the edge line. Note that the opacity value of the edge element affects the effective opacity of its line and label subcomponents.

Value between 0 and 1 inclusive.

The style of the edge’s line.

source-distance-from-node?: PropertyValueEdge<number>

The distance the edge ends from its source.

target-distance-from-node?: PropertyValueEdge<number>

The distance the edge ends from its target.

width?: PropertyValueEdge<string | number>

The width of an edge’s line.