04 Making the Style Configurable
Step 5/12 — 05 Data from Tag
01 Create A Rectangle 02 Create A Custom Shape 03 Render Performance 04 Making the Style Configurable 05 Data from Tag 06 Rendering Text 07 Hit-Testing 08 Edge Cropping 09 Item Visibility 10 Render Boundaries 11 Group Node Style 12 Group Node Style Behavior
06 Rendering Text

# Item-specific customizations

In the last step, we added a property to the style to change the visualization. Now, we want to be even more versatile and change the visualization based on the data of each visualized node.

Note | yFiles for HTML provides a `tag` property for all graph items, which is frequently used to bind business objects to nodes and edges. The style can make use of this data and translate it to a visual representation.

In this example, we adjust the style implementation to use the `color` stored in the node’s `tag` instead of using the color from a style property. First, we add two nodes with different `tag` objects.

    graph.createNode({
      layout: [0, 0, 100, 70],
      tag: { color: '#b91c3b' },
      labels: ['Red']
    })
    graph.createNode({
      layout: [140, 0, 100, 70],
      tag: { color: '#9e7cb5', showBadge: true },
      labels: ['Purple with badge']
    })

Then we adjust the style accordingly. The tag’s `color` property will become the background color of the shape we created earlier.

    const fillColor = node.tag?.color ?? '#0b7189'
    pathElement.setAttribute('fill', fillColor)

Of course, you are not limited to only changing colors in this manner. Earlier, one node’s tag includes a `showBadge` property, which we can use to add another element to the visualization.

Since there are now two SVG elements, we can no longer just return the path. Instead, we have to wrap both the path and the badge in a `<g>` element to group them together. We will also move the `setTranslate` call to translate the group instead of just the path:

    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
    SvgVisual.setTranslate(g, x, y)

    g.append(pathElement)

    const showBadge = node.tag?.showBadge
    if (showBadge) {
      const badge = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'circle'
      )
      badge.setAttribute('r', '8')
      badge.setAttribute('fill', '#6c9f44')
      badge.setAttribute('stroke', '#496c2e')
      g.append(badge)
    }

    return SvgVisual.from(g, {
      width,
      height,
      fillColor,
      showBadge
    })

Note | If the style uses the tag data to customize the visualization, it is possible to share a single style instance between multiple items. Using this pattern, the style can create different visualizations depending on the business data.

06 Rendering Text