Skip to content

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).

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.

{
"renderLabels": true
}

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

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

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

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

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

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

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).

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

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).

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

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.

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

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.

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

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.

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