Class: GraphConfig

Implements

GraphConfigInterface

Constructors

Constructor

new GraphConfig(): GraphConfig

Returns

GraphConfig

Properties

Property	Type	Description
`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`	`string`	Canvas background color. Can be either a hex color string (e.g., ‘#b3b3b3’) or an array of RGBA values. Default value: ‘#222222’
`spaceSize`	`number`	Simulation space size (max 8192). Default value: `8192`
`pointColor`	`string`	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’
`pointGreyoutOpacity`	`undefined`	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`
`pointGreyoutColor`	`undefined`	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`
`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`	`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`	`number`	Scale factor for the point size. Default value: `1`
`hoveredPointCursor`	`string`	Cursor style to use when hovering over a point Default value: `auto`
`renderHoveredPointRing`	`boolean`	Turns ring rendering around a point on hover on / off Default value: `false`
`hoveredPointRingColor`	`string`	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`	`string`	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`	`undefined`	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`
`linkColor`	`string`	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`	`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`	`number`	Greyed out link opacity value when the selection is active. Default value: `0.1`
`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`	`number`	Scale factor for the link width. Default value: `1`
`renderLinks`	`boolean`	Turns link rendering on / off. Default value: `true`
`curvedLinks`	`boolean`	If set to true, links are rendered as curved lines. Otherwise as straight lines. Default value: `false`
`curvedLinkSegments`	`number`	Number of segments in a curved line. Default value: `19`.
`curvedLinkWeight`	`number`	Weight affects the shape of the curve. Default value: `0.8`.
`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`	`boolean`	The default link arrow value that controls whether or not to display link arrows. Default value: `false`
`linkArrowsSizeScale`	`number`	Scale factor for the link arrows size. Default value: `1`
`scaleLinksOnZoom`	`boolean`	Increase or decrease the size of the links when zooming in or out. Default value: `false`
`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`	`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`	`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`	`number`	Decay coefficient. Use smaller values if you want the simulation to “cool down” slower. Default value: `5000`
`simulationGravity`	`number`	Gravity force coefficient. Default value: `0.25`
`simulationCenter`	`number`	Centering to center mass force coefficient. Default value: `0`
`simulationRepulsion`	`number`	Repulsion force coefficient. Default value: `1.0`
`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`	`number`	Barnes–Hut approximation depth. Can only be used when `useClassicQuadtree` is set `true`. Default value: `12`
`simulationLinkSpring`	`number`	Link spring force coefficient. Default value: `1`
`simulationLinkDistance`	`number`	Minimum link distance. Default value: `10`
`simulationLinkDistRandomVariationRange`	`number`[]	Range of random link distance values. Default value: `[1, 1.2]`
`simulationRepulsionFromMouse`	`number`	Repulsion coefficient from mouse position. The repulsion force is activated by pressing the right mouse button. Default value: `2`
`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`	`number`	Friction coefficient. Values range from 0 (high friction, stops quickly) to 1 (no friction, keeps moving). Default value: `0.85`
`simulationCluster`	`number`	Cluster coefficient. Default value: `0.1`
`onSimulationStart`	`undefined` \| () => `void`	Callback function that will be called when the simulation starts. Default value: `undefined`
`onSimulationTick`	`undefined` \| (`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
`onSimulationEnd`	`undefined` \| () => `void`	Callback function that will be called when the simulation stops. Default value: `undefined`
`onSimulationPause`	`undefined` \| () => `void`	Callback function that will be called when the simulation gets paused. Default value: `undefined`
`onSimulationRestart`	`undefined` \| () => `void`	Callback function that will be called when the simulation is restarted. Default value: `undefined`
`onClick`	`undefined` \| (`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
`onMouseMove`	`undefined` \| (`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
`onPointMouseOver`	`undefined` \| (`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
`onPointMouseOut`	`undefined` \| (`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
`onZoomStart`	`undefined` \| (`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`
`onZoom`	`undefined` \| (`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`
`onZoomEnd`	`undefined` \| (`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`
`onDragStart`	`undefined` \| (`e`) => `void`	Callback function that will be called when dragging starts. First argument is a D3 Drag Event: `(event: D3DragEvent) => void`. Default value: `undefined`
`onDrag`	`undefined` \| (`e`) => `void`	Callback function that will be called continuously during dragging. First argument is a D3 Drag Event: `(event: D3DragEvent) => void`. Default value: `undefined`
`onDragEnd`	`undefined` \| (`e`) => `void`	Callback function that will be called when dragging ends. First argument is a D3 Drag Event: `(event: D3DragEvent) => void`. Default value: `undefined`
`showFPSMonitor`	`boolean`	Show WebGL performance monitor. Default value: `false`
`pixelRatio`	`number`	Canvas pixel ratio. Default value: `2`
`scalePointsOnZoom`	`boolean`	Increase or decrease the size of the points when zooming in or out. Default value: `false`
`initialZoomLevel`	`undefined`	Initial zoom level. Can be set once during graph initialization. If set, `fitViewOnInit` value will be ignored. Default value: `undefined`
`enableZoom`	`boolean`	Enables or disables zooming in and out. Default: `true`
`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`	`boolean`	Enables or disables dragging of points in the graph. Default value: `false`
`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`	`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`	`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`	`number`	Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled. Default: `250`
`fitViewByPointsInRect`	`undefined`	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`	`undefined`	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`	`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`
`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
`rescalePositions`	`undefined`	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

Methods

init()

init(config): void

Parameters

Parameter	Type
`config`	`GraphConfigInterface`

Returns

void

deepMergeConfig()

deepMergeConfig<T>(current, next, key): void

Type Parameters

Type Parameter
`T`

Parameters

Parameter	Type
`current`	`T`
`next`	`T`
`key`	keyof `T`

Returns

void

Upgrade from v1 CosmographBars