Interface: GraphConfigInterface

Properties

enableSimulation?

optional enableSimulation: boolean

If set to false, the simulation will not run. This property will be applied only on component initialization and it can’t be changed using the setConfig method. Default value: true

backgroundColor?

optional backgroundColor: string | [number, number, number, number]

Canvas background color. Can be either a hex color string (e.g., ‘#b3b3b3’) or an array of RGBA values. Default value: ‘#222222’

spaceSize?

optional spaceSize: number

Simulation space size (max 8192). Default value: 8192

pointColor?

optional pointColor: string | [number, number, number, number]

The default color to use for points when no point colors are provided, or if the color value in the array is undefined or null. This can be either a hex color string (e.g., ‘#b3b3b3’) or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 255. Default value: ‘#b3b3b3’

pointGreyoutColor?

optional pointGreyoutColor: string | [number, number, number, number]

The color to use for points when they are greyed out (when selection is active). This can be either a hex color string (e.g., ‘#b3b3b3’) or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 255.

If not provided, the color will be the same as the pointColor, but darkened or lightened depending on the background color.

If pointGreyoutOpacity is also defined, it will override the alpha/opacity component of this color.

Default value: undefined

pointGreyoutOpacity?

optional pointGreyoutOpacity: number

Opacity value for points when they are greyed out (when selection is active). Values range from 0 (completely transparent) to 1 (fully opaque).

If defined, this value will override the alpha/opacity component of pointGreyoutColor.

Default value: undefined

pointSize?

optional pointSize: number

The default size value to use for points when no point sizes are provided or if the size value in the array is undefined or null. Default value: 4

pointOpacity?

optional pointOpacity: number

Universal opacity value applied to all points. This value multiplies with individual point alpha values (if set via setPointColors). Useful for dynamically controlling opacity of all points without updating individual RGBA arrays. Default value: 1.0

pointSizeScale?

optional pointSizeScale: number

Scale factor for the point size. Default value: 1

hoveredPointCursor?

optional hoveredPointCursor: string

Cursor style to use when hovering over a point Default value: auto

renderHoveredPointRing?

optional renderHoveredPointRing: boolean

Turns ring rendering around a point on hover on / off Default value: false

hoveredPointRingColor?

optional hoveredPointRingColor: string | [number, number, number, number]

Hovered point ring color hex value. Can be either a hex color string (e.g., ‘#b3b3b3’) or an array of RGBA values. Default value: white

focusedPointRingColor?

optional focusedPointRingColor: string | [number, number, number, number]

Focused point ring color hex value. Can be either a hex color string (e.g., ‘#b3b3b3’) or an array of RGBA values. Default value: white

focusedPointIndex?

optional focusedPointIndex: number

Set focus on a point by index. A ring will be highlighted around the focused point. When set to undefined, no point is focused. Default value: undefined

renderLinks?

optional renderLinks: boolean

Turns link rendering on / off. Default value: true

linkColor?

optional linkColor: string | [number, number, number, number]

The default color to use for links when no link colors are provided, or if the color value in the array is undefined or null. This can be either a hex color string (e.g., ‘#666666’) or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 255. Default value: ‘#666666’

linkOpacity?

optional linkOpacity: number

Universal opacity value applied to all links. This value multiplies with individual link alpha values (if set via setLinkColors). Useful for dynamically controlling opacity of all links without updating individual RGBA arrays. Default value: 1.0

linkGreyoutOpacity?

optional linkGreyoutOpacity: number

Greyed out link opacity value when the selection is active. Default value: 0.1

linkWidth?

optional linkWidth: number

The default width value to use for links when no link widths are provided or if the width value in the array is undefined or null. Default value: 1

linkWidthScale?

optional linkWidthScale: number

Scale factor for the link width. Default value: 1

scaleLinksOnZoom?

optional scaleLinksOnZoom: boolean

Increase or decrease the size of the links when zooming in or out. Default value: false

curvedLinks?

optional curvedLinks: boolean

If set to true, links are rendered as curved lines. Otherwise as straight lines. Default value: false

curvedLinkSegments?

optional curvedLinkSegments: number

Number of segments in a curved line. Default value: 19.

curvedLinkWeight?

optional curvedLinkWeight: number

Weight affects the shape of the curve. Default value: 0.8.

curvedLinkControlPointDistance?

optional curvedLinkControlPointDistance: number

Defines the position of the control point of the curve on the normal from the centre of the line. If set to 1 then the control point is at a distance equal to the length of the line. Default value: 0.5

linkArrows?

optional linkArrows: boolean

The default link arrow value that controls whether or not to display link arrows. Default value: false

linkArrowsSizeScale?

optional linkArrowsSizeScale: number

Scale factor for the link arrows size. Default value: 1

linkVisibilityDistanceRange?

optional linkVisibilityDistanceRange: number[]

The range defines the minimum and maximum link visibility distance in pixels. The link will be fully opaque when its length is less than the first number in the array, and will have linkVisibilityMinTransparency transparency when its length is greater than the second number in the array. This distance is defined in screen space coordinates and will change as you zoom in and out (e.g. links become longer when you zoom in, and shorter when you zoom out). Default value: [50, 150]

linkVisibilityMinTransparency?

optional linkVisibilityMinTransparency: number

The transparency value that the link will have when its length reaches the maximum link distance value from linkVisibilityDistanceRange. Default value: 0.25

useClassicQuadtree?

optional useClassicQuadtree: boolean

Use the classic quadtree algorithm for the Many-Body force. This property will be applied only on component initialization and it can’t be changed using the setConfig method. Default value: false

simulationDecay?

optional simulationDecay: number

Decay coefficient. Use smaller values if you want the simulation to “cool down” slower. Default value: 5000

simulationGravity?

optional simulationGravity: number

Gravity force coefficient. Default value: 0.25

simulationCenter?

optional simulationCenter: number

Centering to center mass force coefficient. Default value: 0

simulationRepulsion?

optional simulationRepulsion: number

Repulsion force coefficient. Default value: 1.0

simulationRepulsionTheta?

optional simulationRepulsionTheta: number

Decreases / increases the detalization of the Many-Body force calculations. When useClassicQuadtree is set to true, this property corresponds to the Barnes–Hut approximation criterion. Default value: 1.15

simulationRepulsionQuadtreeLevels?

optional simulationRepulsionQuadtreeLevels: number

Barnes–Hut approximation depth. Can only be used when useClassicQuadtree is set true. Default value: 12

simulationLinkSpring?

optional simulationLinkSpring: number

Link spring force coefficient. Default value: 1

simulationLinkDistance?

optional simulationLinkDistance: number

Minimum link distance. Default value: 10

simulationLinkDistRandomVariationRange?

optional simulationLinkDistRandomVariationRange: number[]

Range of random link distance values. Default value: [1, 1.2]

simulationRepulsionFromMouse?

optional simulationRepulsionFromMouse: number

Repulsion coefficient from mouse position. The repulsion force is activated by pressing the right mouse button. Default value: 2

enableRightClickRepulsion?

optional enableRightClickRepulsion: boolean

Enable or disable the repulsion force from mouse when right-clicking. When set to true, holding the right mouse button will activate the mouse repulsion force. When set to false, right-clicking will not trigger any repulsion force. Default value: false

simulationFriction?

optional simulationFriction: number

Friction coefficient. Values range from 0 (high friction, stops quickly) to 1 (no friction, keeps moving). Default value: 0.85

simulationCluster?

optional simulationCluster: number

Cluster coefficient. Default value: 0.1

onSimulationStart()?

optional onSimulationStart: () => void

Callback function that will be called when the simulation starts. Default value: undefined

Returns

void

onSimulationTick()?

optional onSimulationTick: (alpha, hoveredIndex?, pointPosition?) => void

Callback function that will be called on every simulation tick. The value of the first argument alpha will decrease over time as the simulation “cools down”. If there’s a point under the mouse pointer, its index will be passed as the second argument and position as the third argument: (alpha: number, hoveredIndex: number | undefined, pointPosition: [number, number] | undefined) => void. Default value: undefined

Parameters

Returns

void

onSimulationEnd()?

optional onSimulationEnd: () => void

Callback function that will be called when the simulation stops. Default value: undefined

Returns

void

onSimulationPause()?

optional onSimulationPause: () => void

Callback function that will be called when the simulation gets paused. Default value: undefined

Returns

void

onSimulationRestart()?

optional onSimulationRestart: () => void

Callback function that will be called when the simulation is restarted. Default value: undefined

Returns

void

onClick()?

optional onClick: (index, pointPosition, event) => void

Callback function that will be called on every canvas click. If clicked on a point, its index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onMouseMove()?

optional onMouseMove: (index, pointPosition, event) => void

Callback function that will be called when mouse movement happens. If the mouse moves over a point, its index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onPointMouseOver()?

optional onPointMouseOver: (index, pointPosition, event) => void

Callback function that will be called when a point appears under the mouse as a result of a mouse event, zooming and panning, or movement of points. The point index will be passed as the first argument, position as the second argument and the corresponding mouse event or D3’s zoom event as the third argument: (index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined) => void. Default value: undefined

Parameters

Returns

void

onPointMouseOut()?

optional onPointMouseOut: (event) => void

Callback function that will be called when a point is no longer underneath the mouse pointer because of a mouse event, zoom/pan event, or movement of points. The corresponding mouse event or D3’s zoom event will be passed as the first argument: (event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void. Default value: undefined

Parameters

Returns

void

onZoomStart()?

optional onZoomStart: (e, userDriven) => void

Callback function that will be called when zooming or panning starts. First argument is a D3 Zoom Event and second indicates whether the event has been initiated by a user interaction (e.g. a mouse event): (event: D3ZoomEvent, userDriven: boolean) => void. Default value: undefined

Parameters

Returns

void

onZoom()?

optional onZoom: (e, userDriven) => void

Callback function that will be called continuously during zooming or panning. First argument is a D3 Zoom Event and second indicates whether the event has been initiated by a user interaction (e.g. a mouse event): (event: D3ZoomEvent, userDriven: boolean) => void. Default value: undefined

Parameters

Returns

void

onZoomEnd()?

optional onZoomEnd: (e, userDriven) => void

Callback function that will be called when zooming or panning ends. First argument is a D3 Zoom Event and second indicates whether the event has been initiated by a user interaction (e.g. a mouse event): (event: D3ZoomEvent, userDriven: boolean) => void. Default value: undefined

Parameters

Returns

void

onDragStart()?

optional onDragStart: (e) => void

Callback function that will be called when dragging starts. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined

Parameters

Returns

void

onDrag()?

optional onDrag: (e) => void

Callback function that will be called continuously during dragging. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined

Parameters

Returns

void

onDragEnd()?

optional onDragEnd: (e) => void

Callback function that will be called when dragging ends. First argument is a D3 Drag Event: (event: D3DragEvent) => void. Default value: undefined

Parameters

Returns

void

showFPSMonitor?

optional showFPSMonitor: boolean

Show WebGL performance monitor. Default value: false

pixelRatio?

optional pixelRatio: number

Canvas pixel ratio. Default value: 2

scalePointsOnZoom?

optional scalePointsOnZoom: boolean

Increase or decrease the size of the points when zooming in or out. Default value: false

initialZoomLevel?

optional initialZoomLevel: number

Initial zoom level. Can be set once during graph initialization. If set, fitViewOnInit value will be ignored. Default value: undefined

enableZoom?

optional enableZoom: boolean

Enables or disables zooming in and out. Default: true

enableSimulationDuringZoom?

optional enableSimulationDuringZoom: boolean

Controls whether the simulation remains active during zoom operations. When set to true, the simulation continues running while zooming. When set to false, the simulation pauses during zoom operations. Default value: false

enableDrag?

optional enableDrag: boolean

Enables or disables dragging of points in the graph. Default value: false

fitViewOnInit?

optional fitViewOnInit: boolean

Whether to center and zoom the view to fit all points in the scene on initialization or not. Ignored if initialZoomLevel is set. Default: true

fitViewDelay?

optional fitViewDelay: number

Delay in milliseconds before fitting the view when fitViewOnInit is enabled. Useful if you want the layout to stabilize a bit before fitting. Default: 250

fitViewPadding?

optional fitViewPadding: number

Padding to apply when fitting the view to show all points. This value is added to the calculated bounding box to provide some extra space around the points. This is used when the fitViewOnInit option is enabled. Default: 0.1

fitViewDuration?

optional fitViewDuration: number

Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled. Default: 250

fitViewByPointsInRect?

optional fitViewByPointsInRect: [number, number][] | [[number, number], [number, number]]

When fitViewOnInit is set to true, fits the view to show the points within a rectangle defined by its two corner coordinates [[left, bottom], [right, top]] in the scene space. Default: undefined

randomSeed?

optional randomSeed: string | number

Providing a randomSeed value allows you to control the randomness of the layout across different simulation runs. It is useful when you want the graph to always look the same on same datasets. This property will be applied only on component initialization and it can’t be changed using the setConfig method. Default value: undefined

pointSamplingDistance?

optional pointSamplingDistance: number

Point sampling distance in pixels between neighboring points when calling the getSampledPointPositionsMap method. This parameter determines how many points will be included in the sample. Default value: 150

rescalePositions?

optional rescalePositions: boolean

Controls automatic position adjustment of points in the visible space.

When undefined (default):

• If simulation is disabled (enableSimulation: false), points will be automatically repositioned to fit within the visible space
• If simulation is enabled, points will not be rescaled

When explicitly set:

• true: Forces points positions to be rescaled
• false: Forces points positions to not be rescaled

attribution?

optional attribution: string

Controls the text shown in the bottom right corner.

• When a non-empty string is provided: Displays the string as HTML
• When empty string or not provided: No text is displayed