4.7 Vertex Shapes

Vertices are rendered as circles by default. The shape style property allows using alternative geometries either by passing a shape keyword or by providing additional configuration for more control. This property is available anywhere vertex styles can be specified (for example in settings.baseStyles.vertex, settings.baseStyles['vertex:group'], or within settings.ruleBasedStyles).

Supported values are circle, ellipse square, rectangle, roundedRectangle, triangle, diamond, pentagon, hexagon, and octagon.

The following describes a few additional configurations:

• ellipse, rectangle, and roundedRectangle can set widthHeightRatio to control aspect ratio.
• roundedRectangle also supports cornerRadiusRatio (defaults to 0.1).
• triangle can rotate using direction: 'up' | 'down' | 'left' | 'right'.
• Applying shape: null removes any shape override and falls back to the default circle.
• When combined with label.angle: null, enabling label.resizeParent lets the chosen shape adapt to the label length.

The following shows an example of applying ellipse styling to vertices:

const settings = {
  baseStyles: {
    vertex: {
      shape: { type: 'ellipse', widthHeightRatio: 1.5 }
    }
  }
};

The preceding code produces the following output:

Figure 4-12 Applying Ellipse Styling to Vertices

Description of "Figure 4-12 Applying Ellipse Styling to Vertices"