Skip to content
Starlight Site Graph

Label Rendering

Each page has a title, and so each node in the graph can have a label associated with it. Here, you can find information on how you can customize the rendering of these labels, such as their size, relative position and opacity (under different conditions).

Label Rendering

Section titled “Label Rendering”

The renderLabels option toggles the rendering of labels on the nodes of the graph. When labels are rendered, they display the name of the node.

{
  "graphConfig": {
    "renderLabels": true
  }
}

Label Font Size

Section titled “Label Font Size”

The labelFontSize determines the size of the labels on the nodes of the graph.

{
  "graphConfig": {
    "labelFontSize": 12,
    "renderLabels": true
  }
}
labelFontSize 12

Label Offset

Section titled “Label Offset”

The labelOffset determines the distance between the label and the node.

{
  "graphConfig": {
    "labelOffset": 10,
    "renderLabels": true
  }
}
labelOffset 10

Label Scale (Hover)

Section titled “Label Scale (Hover)”

The labelHoverScale determines the scale of the labels on the nodes of the graph when hovered over.

{
  "graphConfig": {
    "labelHoverScale": 1.3,
    "renderLabels": true
  }
}
labelHoverScale 1.3

Label Offset (Hover)

Section titled “Label Offset (Hover)”

The labelHoverOffset determines the distance between the label and the node when hovered over. So when hovered, the label will be offset to the specified distance (it is not additive to the base labelOffset).

{
  "graphConfig": {
    "labelHoverOffset": 14,
    "renderLabels": true
  }
}
labelHoverOffset 14

Label Opacity Scale

Section titled “Label Opacity Scale”

The labelOpacityScale determines how opaque the labels on the nodes of the graph are, based on the zoom level. A higher value will make the labels visible at lower zoom levels (when the user has zoomed out).

{
  "graphConfig": {
    "labelOpacityScale": 1.3,
    "renderLabels": true,
    "enableZoom": true
  }
}
labelOpacityScale 1.3

Label Opacity (Hover)

Section titled “Label Opacity (Hover)”

The labelHoverOpacity determines how opaque the labels on the nodes of the graph are when hovered over. A higher value will make the labels more opaque when hovered over.

{
  "graphConfig": {
    "labelHoverOpacity": 1,
    "renderLabels": true
  }
}
labelHoverOpacity 1

Label Opacity (Adjacent)

Section titled “Label Opacity (Adjacent)”

The labelAdjacentOpacity determines how opaque the labels on the nodes of the graph are when adjacent to the hovered node. A higher value will make the labels more opaque when adjacent to the hovered node.

{
  "graphConfig": {
    "labelAdjacentOpacity": 1,
    "renderLabels": true
  }
}
labelAdjacentOpacity 1

Label Opacity (Muted)

Section titled “Label Opacity (Muted)”

The labelMutedOpacity determines how opaque the labels on the nodes of the graph are when the node is not adjacent or hovered over. A higher value will make the labels more opaque when the node is not adjacent or hovered over.

{
  "graphConfig": {
    "labelMutedOpacity": 0.00001,
    "renderLabels": true
  }
}
labelMutedOpacity 0