Interface: GraphConfigInterface

Properties

enableSimulation

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 or setConfigPartial methods. Default value: true

backgroundColor

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

spaceSize: number

Simulation space size. Default value: 4096 (larger values may crash on some devices, e.g. iOS; see https://github.com/cosmosgl/graph/issues/203).

pointDefaultColor

pointDefaultColor: 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 1. 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 1.

If not provided, the color will be the same as the point’s original color, but darkened or lightened depending on the background color.

If pointGreyoutOpacity is also defined, it will be multiplied with the final alpha of this color.

Default value: undefined

pointGreyoutOpacity?

optional pointGreyoutOpacity: number

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

When defined, this value is multiplied with the point’s final alpha instead of the default pointOpacity. When undefined, greyed-out points use pointOpacity as their multiplier.

Default value: undefined

pointDefaultSize

pointDefaultSize: 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

pointDefaultShape

pointDefaultShape: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | CosmographPointShape

The default shape to use for points when no point shapes are provided via setPointShapes(), or if the shape value in the array is undefined, null, or invalid. Accepts a PointShape enum value (e.g., PointShape.Circle), a plain number (e.g., 2), or a numeric string (e.g., "2"). Default value: PointShape.Circle

pointOpacity

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

pointSizeScale: number

Scale factor for the point size. Default value: 1

hoveredPointCursor

hoveredPointCursor: string

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

hoveredLinkCursor

hoveredLinkCursor: string

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

renderHoveredPointRing

renderHoveredPointRing: boolean

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

hoveredPointRingColor

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

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

renderLinks: boolean

Turns link rendering on / off. Default value: true

linkDefaultColor

linkDefaultColor: 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 1. Default value: ‘#666666’

linkOpacity

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

linkGreyoutOpacity: number

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

linkDefaultWidth

linkDefaultWidth: 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

hoveredLinkColor?

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

The color to use for links when they are hovered. This can be either a hex color string (e.g., ‘#ff3333’) or an array of RGBA values in the format [red, green, blue, alpha] where each value is a number between 0 and 1. Default value: undefined

hoveredLinkWidthIncrease

hoveredLinkWidthIncrease: number

Number of pixels to add to the link width when hovered. The hovered width is calculated as: originalWidth + hoveredLinkWidthIncrease Default value: 5

linkWidthScale

linkWidthScale: number

Scale factor for the link width. Default value: 1

scaleLinksOnZoom

scaleLinksOnZoom: boolean

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

curvedLinks

curvedLinks: boolean

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

curvedLinkSegments

curvedLinkSegments: number

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

curvedLinkWeight

curvedLinkWeight: number

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

curvedLinkControlPointDistance

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

linkDefaultArrows

linkDefaultArrows: boolean

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

linkArrowsSizeScale

linkArrowsSizeScale: number

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

linkVisibilityDistanceRange

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

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

simulationDecay

simulationDecay: number

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

simulationGravity

simulationGravity: number

Gravity force coefficient. Default value: 0.25

simulationCenter

simulationCenter: number

Centering to center mass force coefficient. Default value: 0

simulationRepulsion

simulationRepulsion: number

Repulsion force coefficient. Default value: 1.0

simulationRepulsionTheta

simulationRepulsionTheta: number

Decreases / increases the detalization of the Many-Body force calculations. Default value: 1.15

simulationLinkSpring

simulationLinkSpring: number

Link spring force coefficient. Default value: 1

simulationLinkDistance

simulationLinkDistance: number

Minimum link distance. Default value: 10

simulationLinkDistRandomVariationRange

simulationLinkDistRandomVariationRange: number[]

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

simulationRepulsionFromMouse

simulationRepulsionFromMouse: number

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

enableRightClickRepulsion

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

simulationFriction: number

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

simulationCluster

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

onSimulationUnpause()?

optional onSimulationUnpause: () => void

Callback function that will be called when the simulation is unpaused. 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

onPointClick()?

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

Callback function that will be called when a point is clicked. The point index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number, pointPosition: [number, number], event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onLinkClick()?

optional onLinkClick: (linkIndex, event) => void

Callback function that will be called when a link is clicked. The link index will be passed as the first argument and the corresponding mouse event as the second argument: (linkIndex: number, event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onBackgroundClick()?

optional onBackgroundClick: (event) => void

Callback function that will be called when the background (empty space) is clicked. The mouse event will be passed as the first argument: (event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onContextMenu()?

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

Callback function that will be called when a context menu trigger (typically right click) happens on the canvas. If triggered 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

onPointContextMenu()?

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

Callback function that will be called when a context menu trigger (typically right click) happens on a point. The point index will be passed as the first argument, position as the second argument and the corresponding mouse event as the third argument: (index: number, pointPosition: [number, number], event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onLinkContextMenu()?

optional onLinkContextMenu: (linkIndex, event) => void

Callback function that will be called when a context menu trigger (typically right click) happens on a link. The link index will be passed as the first argument and the corresponding mouse event as the second argument: (linkIndex: number, event: MouseEvent) => void. Default value: undefined

Parameters

Returns

void

onBackgroundContextMenu()?

optional onBackgroundContextMenu: (event) => void

Callback function that will be called when a context menu trigger (typically right click) happens on the background (empty space). The mouse event will be passed as the first argument: (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, isSelected) => 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, the corresponding mouse event or D3’s zoom event as the third argument, and whether the hovered point is selected as the fourth argument: (index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined, isSelected: boolean) => 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

onLinkMouseOver()?

optional onLinkMouseOver: (linkIndex) => void

Callback function that will be called when the mouse moves over a link. The link index will be passed as the first argument: (linkIndex: number) => void. Default value: undefined

Parameters

Returns

void

onLinkMouseOut()?

optional onLinkMouseOut: (event) => void

Callback function that will be called when the mouse moves out of a link. The 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

showFPSMonitor: boolean

Show WebGL performance monitor. Default value: false

pixelRatio

pixelRatio: number

Pixel ratio for the canvas. Higher values use more GPU memory but provide better quality on high-DPI displays. Default value: window.devicePixelRatio || 2

scalePointsOnZoom

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. This property will be applied only on component initialization and it can’t be changed using the setConfig or setConfigPartial methods. If set, fitViewOnInit value will be ignored. Default value: undefined

enableZoom

enableZoom: boolean

Enables or disables zooming in and out. Default value: true

enableSimulationDuringZoom

enableSimulationDuringZoom: boolean

Controls whether the simulation remains active during interactive (user-driven) zoom operations. When set to true, the simulation continues running while zooming. When set to false, the simulation pauses during zoom operations. Programmatic zoom methods (e.g., zoomToPointByIndex, fitView) default to running the simulation regardless of this setting, but can be controlled via their enableSimulation parameter. Default value: false

enableDrag

enableDrag: boolean

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

fitViewOnInit

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

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

fitViewPadding: number

Padding to apply when fitting the view to show all points. This value should be between 0 and 1, and 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

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

fitViewByPointIndices?

optional fitViewByPointIndices: number[]

When fitViewOnInit is set to true, fits the view to show only the specified points by their indices. Takes precedence over fitViewByPointsInRect when both are provided. 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 or setConfigPartial methods. Default value: undefined

pointSamplingDistance

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: 100

linkSamplingDistance

linkSamplingDistance: number

Link sampling distance in pixels between neighboring links when calling the getSampledLinks method. This parameter determines how many links will be included in the sample (based on link midpoints in screen space). Default value: 100

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

Default value: undefined

attribution

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

This property is applied only on component initialization and can’t be changed using the setConfig or setConfigPartial methods.

Default value: ''