06 Configure Styles - Tutorial: Graph Builder [yFiles for HTML]

Styling the graph using GraphBuilder

GraphBuilder supports various approaches for styling the graph elements. They range from simple default visualizations to accessing the business data for defining specific styles.

We will now style the nodes and edges in the graph using a simple company ownership diagram with the following types.

type EntityData = {
  id: string
  type: 'Trust' | 'Corporation' | 'Branch' | 'PE_Risk'
  currency: 'USD' | 'EUR'
}

type ConnectionData = { sourceId: string; targetId: string; ownership: number }

Node styling

There are basically three ways to style nodes using GraphBuilder: Specifically, you can set default styles, style bindings and style providers on the NodeCreator.

Default styles

A default style will apply to all nodes of the NodesSource for which no other style is specified. In this example, as a default, we set the size, shape and fill as follows:

nodesSource.nodeCreator.defaults.size = new Size(150, 90)
nodesSource.nodeCreator.defaults.style = new ShapeNodeStyle({
  shape: 'ellipse',
  fill: blue
})

Style bindings

To style specific attributes of the default style defined above using business data, use style bindings. In this example, we bind the stroke and thickness of the ShapeNodeStyle to the currency property of the displayed data item.

Note	When using style bindings, it is important that the default styles are not shared. Otherwise, the same style is going to be used for all nodes.

// disable sharing of styles
nodesSource.nodeCreator.defaults.shareStyleInstance = false

nodesSource.nodeCreator.styleBindings.addBinding(
  'stroke',
  (entityData: EntityData) => {
    return new Stroke({
      fill: entityData.currency === 'EUR' ? darkBlue : red,
      thickness: 3
    })
  }
)

Style providers

In contrast to a style binding, a style provider returns complete INodeStyles, usually involving some calculations with the provided node data. In this example, different ShapeNodeStyles are returned depending on the type of entity represented by the node:

nodesSource.nodeCreator.styleProvider = (
  entityData: EntityData
): ShapeNodeStyle | undefined => {
  if (entityData.type === 'Branch') {
    return new ShapeNodeStyle({ shape: 'round-rectangle', fill: gold })
  } else if (entityData.type === 'Corporation') {
    return new ShapeNodeStyle({ shape: 'octagon', fill: green })
  }
}

Edge styling

For edge styling, default styles, bindings and providers work the same way as for node styling. In this example we only use an edge style provider that styles ownership edges with more than 50% ownership in red and edges without ownership data in gray with a dashed stroke:

edgesSource.edgeCreator.styleProvider = (
  connectionData: ConnectionData
): PolylineEdgeStyle => {
  if (connectionData.ownership) {
    return new PolylineEdgeStyle({
      stroke: new Stroke({
        fill: connectionData.ownership > 50 ? red : 'black',
        thickness: 3
      })
    })
  } else {
    return new PolylineEdgeStyle({
      stroke: new Stroke({ fill: gray, thickness: 3, dashStyle: 'dash' })
    })
  }
}

Note	Please have a look in this tutorial step’s demo code in `configure-styles.ts` and play around with the different ways to style the nodes.