Skip to main content

Graph Style Script @EdgeStyle directive properties

@EdgeStyle​

Here is the list of all properties that can be defined in the @EdgeStyle directive, along with their expected types.

arrow-size: Number​

Sets the size of the arrow on the relationship line end.

Examples:

  • arrow-size: 10 sets the arrow size to be 10 pixels.

color: Color​

Sets the background color of an element.

Examples:

  • color: #FF0000 sets the background color of the element to red.
  • color: limegreen sets the background color of the element to lime green.

color-hover: Color​

Sets the background color of an element on mouse hover event.

Examples:

  • color-hover: #FF0000 sets the background color of the shape to red on mouse hover event.
  • color-hover: limegreen sets the background color of the shape to lime green on mouse hover event.

color-selected: Color​

Sets the background color of an element on mouse select event.

Examples:

  • color-selected: #FF0000 sets the background color of the shape to red on mouse select event.
  • color-selected: limegreen sets the background color of the shape to lime green on mouse select event.

font-background-color: Color​

Sets the background color of an element's label (text). Text can be defined with property label.

Examples:

  • font-background-color: #FF0000 sets the text background color to red.
  • font-background-color: limegreen sets the text background color to lime green.

font-color: Color​

Sets the color of the element's label (text). Text can be defined with property label.

Examples:

  • font-color: #FF0000 sets the text color to red.
  • font-color: limegreen sets the text color to lime green.

font-family: String​

Sets a font family for the element's text. Text can be defined with property label.

Examples:

  • font-family: "sans-serif" sets the text family font to sans-serif.
  • font-family: "cursive" sets the text family font to cursive.

font-size: Number​

Sets the size of the element's text. Text can be defined with property label.

Example:

  • font-size: 10 sets the size of the font to 10 pixels.

label: String​

Sets the element's text label. The text is shown below the element (node or relationship).

Examples:

  • label: "Text" sets the text "Text" as a label for every single element.
  • label: Property(edge, "quantity") sets the text for the element's label dynamically by using the edge property "quantity".

shadow-color: Color​

Sets the color of the element's shadow.

Examples:

  • shadow-color: #FF0000 sets the shadow color to red.
  • shadow-color: limegreen sets the shadow color to lime green.

shadow-size: Number​

Sets the blur size of the element's shadow. If the value is 0, the shadow will be a solid color defined by the property shadow-color.

Examples:

  • shadow-size: 5 indicates that the shadow will be diffused across 5 pixels.

shadow-offset-x: Number​

Sets the horizontal offset of the element's shadow. A positive value puts the shadow on the right side of the shape, a negative value puts the shadow on the left side of the shape.

Examples:

  • shadow-offset-x: 0 indicates that the shadow is exactly behind the shape.
  • shadow-offset-x: 20 indicates that the shadow starts 20 pixels to the right.

shadow-offset-y: Number​

Sets the vertical offset of the element's shadow. A positive value puts the shadow below the shape, a negative value puts the shadow above the shape.

Examples:

  • shadow-offset-y: 0 indicates that the shadow is exactly behind the shape.
  • shadow-offset-y: 20 indicates that the shadow starts 20 pixels below the shape position.

width: Number​

Sets the width of the relationship line.

Example:

  • width: 2 indicates that the width of the relationship line will be 2 pixels wide.

width-hover: Number​

Sets the width of the relationship line on mouse hover event.

Example:

  • width-hover: 2 indicates that the width of the relationship will be 2 pixels wide on mouse hover event.

width-selected: Number​

Sets the width of the relationship line on mouse select event.

Examples:

  • width-selected: 2 indicates that the width of the relationship will be 2 pixels wide on mouse select event.