Interface: CosmographConfig

Extends

• BasicConfig.CallbackConfig.SimulationConfig.SimulationEventConfig.CosmographDataConfig.LabelsCosmographConfig.Omit<GraphConfigInterface, "enableSimulation" | "attribution">

Properties

enableSimulation?

optional enableSimulation: boolean

Controls whether to disable force-directed layout simulation. If undefined, the simulation will be automatically disabled if there are no links or points have layout coordinates provided.

When disabled (true):

• Uses x/y values from data for point positions. If positions not provided, random positions will be used.

Default

undefined

Inherited from

BasicConfig.enableSimulation

rectangularSelectorClassName?

optional rectangularSelectorClassName: string

Specifies the CSS class to use for the rectangular selector.

Inherited from

BasicConfig.rectangularSelectorClassName

polygonalSelectorStrokeColor?

optional polygonalSelectorStrokeColor: string

Stroke color for the lasso selection

Default

'#ffffff'

Inherited from

BasicConfig.polygonalSelectorStrokeColor

polygonalSelectorLineWidth?

optional polygonalSelectorLineWidth: number

Line width for the lasso selection

Default

2

Inherited from

BasicConfig.polygonalSelectorLineWidth

selectPointOnClick?

optional selectPointOnClick: boolean | "single"

Controls whether to select a clicked point with the connected points.

• When true: Selects the clicked point and all connected points to it
• When 'single': Selects only the clicked point
• Will also focus (render ring around) the clicked point if focusPointOnClick is undefined

Inherited from

BasicConfig.selectPointOnClick

selectPointOnLabelClick?

optional selectPointOnLabelClick: boolean | "single"

Controls whether to select a point with the connected points when the point’s label is clicked.

• When true: Selects the clicked point and all connected points to it
• When 'single': Selects only the clicked point
• Will also focus (render ring around) the clicked point if focusPointOnClick is undefined

Inherited from

BasicConfig.selectPointOnLabelClick

selectClusterOnLabelClick?

optional selectClusterOnLabelClick: boolean

Controls whether to select points of a cluster when its label is clicked.

Inherited from

BasicConfig.selectClusterOnLabelClick

focusPointOnClick?

optional focusPointOnClick: boolean

Controls whether to focus on a point when the point itself is clicked.

Inherited from

BasicConfig.focusPointOnClick

focusPointOnLabelClick?

optional focusPointOnLabelClick: boolean

Controls whether to focus on a point when the point’s label is clicked.

Inherited from

BasicConfig.focusPointOnLabelClick

componentsDisplayStateMode?

optional componentsDisplayStateMode: false | "loading"

Controls display state messages behavior for all Cosmograph components.

• When undefined: Show all state messages (loading, no data)
• When 'loading': Show only loading state message, hide no data message
• When false: Disable all state messages

This will be applied to all components unless explicitly overridden in component-specific configuration.

Default

undefined

Inherited from

BasicConfig.componentsDisplayStateMode

statusIndicatorMode?

optional statusIndicatorMode: false | "text" | "spinner"

Chooses which kind of status indicator to show during loading or errors.

• 'spinner' (default): show a spinner during loading, falling back to text on errors.
• 'text': always show descriptive messages.
• false: hide the status indicator entirely.

Default

'spinner'

Inherited from

BasicConfig.statusIndicatorMode

disableLogging?

optional disableLogging: boolean

Disables logging of Cosmograph messages in the console.

Default

false

Inherited from

BasicConfig.disableLogging

preservePointPositionsOnDataUpdate?

optional preservePointPositionsOnDataUpdate: boolean

Preserve positions for points with same ids (pointIdBy) during point data update

When true:

• Points with same ids will stay where they were instead of generating new positions
• New points get new positions (or positions from pointXBy/pointYBy if set)
• Preserved positions take priority over new coordinates from pointXBy/pointYBy for existing points

Default

false

Inherited from

BasicConfig.preservePointPositionsOnDataUpdate

onPointsFiltered()?

optional onPointsFiltered: (filteredPoints) => void

Callback function that will be called when the points was filtered by point crossfilter.

Parameters

Returns

void

Inherited from

CallbackConfig.onPointsFiltered

onLinksFiltered()?

optional onLinksFiltered: (filteredLinks) => void

Callback function that will be called when the links was filtered by link crossfilter.

Parameters

Returns

void

Inherited from

CallbackConfig.onLinksFiltered

onLabelClick()?

optional onLabelClick: (index, id, event) => void

Callback function that will be called when clicked on a label.

Parameters

Returns

void

Inherited from

CallbackConfig.onLabelClick

onClusterLabelClick()?

optional onClusterLabelClick: (index, id, event) => void

Callback function that will be called when clicked on a cluster label.

Parameters

Returns

void

Inherited from

CallbackConfig.onClusterLabelClick

onGraphRebuilt()?

optional onGraphRebuilt: (stats) => void

Callback function that executes after the graph completes rebuilding with new data.

Parameters

Returns

void

Inherited from

CallbackConfig.onGraphRebuilt

onGraphDataUpdated()?

optional onGraphDataUpdated: () => void

Callback function that will be called when points or links data is replaced or modified at the local database.

Returns

void

Inherited from

CallbackConfig.onGraphDataUpdated

onConfigUpdated()?

optional onConfigUpdated: () => void

Callback function that will be called after the config was updated.

Returns

void

Inherited from

CallbackConfig.onConfigUpdated

onRectSelected()?

optional onRectSelected: (selection) => void

Callback function that will be called when area selection was performed.

Parameters

Returns

void

Inherited from

CallbackConfig.onRectSelected

onPolygonSelected()?

optional onPolygonSelected: (polygonPoints) => void

Callback function that will be called when polygonal selection was performed.

Parameters

Returns

void

Inherited from

CallbackConfig.onPolygonSelected

points?

optional points: CosmographInputData

Input data for the points.

See

CosmographInputData

Inherited from

CosmographDataConfig.points

pointIdBy?

optional pointIdBy: string

Unique identifier column for each point. Required for mapping links to points correctly.

Inherited from

CosmographDataConfig.pointIdBy

pointIndexBy?

optional pointIndexBy: string

Numeric index column for each point. Used for efficient lookups and should be a sequential integer starting from 0.

Inherited from

CosmographDataConfig.pointIndexBy

pointColorBy?

optional pointColorBy: string

The column name for the point color. If provided, points will be colored based on the values in this column, which should be either a color string or an array of numeric [r, g, b, a] values.

Inherited from

CosmographDataConfig.pointColorBy

pointColorByFn?

optional pointColorByFn: ColorAccessorFn<number> | ColorAccessorFn<string> | ColorAccessorFn<boolean> | ColorAccessorFn<unknown>

Specifies the function that will be used to generate the color for each point based on the value in the pointColorBy column. It takes a point record as input and its index, and should return a color string or an array of [r, g, b, a] values.

Overrides the values in pointColorBy column by processing them (in this case the values in the pointColorBy column can be of any type, not just colors).

Has effect only when pointColorBy is provided and pointColorStrategy is undefined.

See

pointColorStrategy

Returns

The color as a string or an array of [r, g, b, a] value to be applied to the point.

Example

// Color points based on a value of the `pointColorBy` column
pointColorByFn: (value: number) => value > 10 ? 'red' : '#00ff00'
 
// Color points based on the index of the point
pointColorByFn: (value: number, index: number) => index % 2 === 0 ? 'red' : '#00ff00'
 
// Color points using RGBA values
pointColorByFn: (value: unknown) => [255, 0, 0, 1]

Inherited from

CosmographDataConfig.pointColorByFn

pointColorPalette?

optional pointColorPalette: string[]

An optional array of color strings that can be used to color the points in the visualization. If provided, the points will be colored using the colors in this palette, cycling through the array as needed.

Used when pointColorStrategy is set to 'palette', 'interpolatePalette', or 'degree'.`

Inherited from

CosmographDataConfig.pointColorPalette

pointColorByMap?

optional pointColorByMap: Record<string, string | [number, number, number, number]>

An optional mapping of values to colors for the points in the visualization. The keys in the map should be string and the values can be either color strings or arrays of RGBA values.

Used when pointColorStrategy is set to 'map'.

Default

undefined

Example

pointColorByMap: {
  'active': '#ff0000', // string key with hex color
  '42': [255, 0, 0, 1], // number key with RGBA array
  'true': 'red'  // boolean key with css-valid color
}

Inherited from

CosmographDataConfig.pointColorByMap

pointColorStrategy?

optional pointColorStrategy: string

Specifies the strategy for coloring points based on data from the pointColorBy column. Available strategies:

undefined (default):

Will automatically use the optimal strategy based on the input configuration and color data type. Current strategy can be acquired with Cosmograph.activePointColorStrategy getter.

'palette'

Uses colors from pointColorPalette without interpolation.

• For numeric data: Creates equal-width buckets mapped to pointColorPalette colors
• For categorical data: Assigns colors from pointColorPalette in order, cycling when unique values exceed palette length

'interpolatePalette'

Interpolates colors from pointColorPalette.

• For numeric data: Creates continuous color scale between pointColorPalette colors
• For categorical data: Creates evenly-spaced color scale by interpolating between pointColorPalette colors to match the number of unique values in pointColorBy so every value is a unique color

'map'

Uses color mapping from pointColorByMap to values in pointColorBy.

• Applies exact color from pointColorByMap for matching values
• Falls back to pointColor when value is not found in map or invalid

'degree'

Colors points based on their degree (number of connections) using interpolated pointColorPalette with quantile-based boundaries.

• Maps point degrees to continuous color scale between pointColorPalette colors
• Has effect only if links provided

'direct'

Directly uses pointColorBy column values as colors.

• Applies the color if it’s a valid color string (hex, rgb, named color, etc) or an array of [r, g, b, a]
• If pointColorByFn exists, applies it to transform pointColorBy values into custom colors with it
• Falls back to pointColor if invalid color
• If neither pointColorBy nor pointColorByFn exist, colors all points with pointColor

Inherited from

CosmographDataConfig.pointColorStrategy

pointSizeBy?

optional pointSizeBy: string

The column name that should contain numeric values to be used for the point size and label weight (if labels enabled). If provided, points will be sized based on the values in this column.

Inherited from

CosmographDataConfig.pointSizeBy

pointSizeStrategy?

optional pointSizeStrategy: string

Specifies the strategy for sizing points based on data from the pointSizeBy column. Available strategies:

undefined (default):

Will automatically use the optimal strategy based on the input configuration and size data type. Current strategy can be acquired with Cosmograph.activePointSizeStrategy getter.

'auto'

Automatically sizes points using symmetric log scaling with quantile-based data boundaries based on the pointSizeBy data. Uses pointSizeRange to determine the min/max size range.

• Has effect only if pointSizeBy provided and contains numeric data.

direct:

Directly uses pointSizeBy column values as point sizes.

• If pointSizeByFn exists, applies it to transform pointSizeBy values into custom sizes with it
• Falls back to pointSize if invalid size
• If neither pointSizeBy nor pointSizeByFn exist, sizes all points with pointSize

'degree'

Sizes points based on their degree (number of connections) with quantile-based boundaries and the min/max from pointSizeRange.

• Has effect only if links provided

Inherited from

CosmographDataConfig.pointSizeStrategy

pointSizeRange?

optional pointSizeRange: [number, number]

Defines the range for automatic point size scaling. Takes [min, max] values in pixels.

When pointSizeBy column contains numeric values, they will be automatically remapped to fit within this range to prevent oversized points.

Used when pointSizeStrategy is set to 'auto' or 'degree'.

Default

[2, 9]

Inherited from

CosmographDataConfig.pointSizeRange

pointSizeByFn?

optional pointSizeByFn: SizeAccessorFn<number> | SizeAccessorFn<string> | SizeAccessorFn<boolean> | SizeAccessorFn<unknown>

Function that generates sizes for points based on values in the pointSizeBy column.

Overrides the values in pointSizeBy column by processing them (values can be of any type, not just numbers).

Has effect only when pointSizeBy is provided and pointSizeStrategy is undefined.

See

pointSizeStrategy

Example

// Size points based on a value of the `pointSizeBy` column
pointSizeByFn: (value: boolean) => value ? 8 : 4
 
// Size points based on the index
pointSizeByFn: (value: unknown, index: number) => index % 2 === 0 ? 8 : 4
 
// Size points using a calculation
pointSizeByFn: (value: number) => Math.min(value * 2, 10)

Inherited from

CosmographDataConfig.pointSizeByFn

pointClusterBy?

optional pointClusterBy: string

Column name containing cluster assignments for points. Can be string or number.

Remarks

Cosmograph will automatically generate a mapping of cluster values to their indices that will be available in the clusterMapping getter.

Inherited from

CosmographDataConfig.pointClusterBy

pointClusterByFn()?

optional pointClusterByFn: (value, index?) => unknown

Function that generates cluster assignments for points based on values in the pointClusterBy column.

Overrides the values in pointClusterBy column by processing them.

Has effect only when pointClusterBy is provided.

Parameters

Returns

unknown

Example

pointClusterByFn: (value: string) => value.length

Inherited from

CosmographDataConfig.pointClusterByFn

pointClusterStrengthBy?

optional pointClusterStrengthBy: string

The pointClusterStrengthBy column defines how strongly each point is attracted to its assigned cluster during the simulation.

The column should contain numeric values where higher values (closer to 1.0) = stronger attraction, point stays closer to its cluster, Lower values (closer to 0.0) = weaker attraction, point can move more freely away from its cluster

Has effect only when pointClusterBy is provided.

Inherited from

CosmographDataConfig.pointClusterStrengthBy

pointLabelBy?

optional pointLabelBy: string

The column name for the point label.

Inherited from

CosmographDataConfig.pointLabelBy

pointLabelWeightBy?

optional pointLabelWeightBy: string

Specify the numeric column that will be used for the point label weight. Higher weight values make labels more likely to be shown.

If not provided, the points labels will be sorted by pointSizeBy if provided or their total links count (degree) otherwise .

Inherited from

CosmographDataConfig.pointLabelWeightBy

pointXBy?

optional pointXBy: string

The column name for the point’s x-coordinate. If provided with pointYBy, points will be positioned based on the values from pointXBy and pointYBy columns.

Inherited from

CosmographDataConfig.pointXBy

pointYBy?

optional pointYBy: string

The column name for the point’s y-coordinate. If provided with pointXBy, points will be positioned based on the values from pointXBy and pointYBy columns.

Inherited from

CosmographDataConfig.pointYBy

pointIncludeColumns?

optional pointIncludeColumns: string[]

An array of additional column names to include in the point data.

These columns will be available on the point objects but not used by Cosmograph directly, can be used as accessors for Cosmograph comopnents. Useful for storing additional information about the points.

Inherited from

CosmographDataConfig.pointIncludeColumns

links?

optional links: CosmographInputData

The input data for the links.

CosmographInputData Accepts File | string | Table | Uint8Array | ArrayBuffer | Record<string, unknown>[]

Inherited from

CosmographDataConfig.links

linkSourceBy?

optional linkSourceBy: string

The column name for the source point of each link. This should match the pointIdBy values in the points data.

Inherited from

CosmographDataConfig.linkSourceBy

linkSourceIndexBy?

optional linkSourceIndexBy: string

The column name for the index of the source point of each link. This is used for efficient lookups and should match the pointIndexBy values in the points data.

Inherited from

CosmographDataConfig.linkSourceIndexBy

linkTargetBy?

optional linkTargetBy: string

The column name for the target point of each link. This should match the pointIdBy values in the points data.

Inherited from

CosmographDataConfig.linkTargetBy

linkTargetIndexBy?

optional linkTargetIndexBy: string

The column name for the index of the target point of each link. This is used for efficient lookups and should match the pointIndexBy values in the points data.

Inherited from

CosmographDataConfig.linkTargetIndexBy

linkColorBy?

optional linkColorBy: string

The column name for the link color.

If provided, links will be colored based on the values in this column, which should be either a color string or an array of numeric [r, g, b, a] values.

Inherited from

CosmographDataConfig.linkColorBy

linkColorByFn?

optional linkColorByFn: ColorAccessorFn<number> | ColorAccessorFn<string> | ColorAccessorFn<boolean> | ColorAccessorFn<unknown>

Specifies the function that will be used to generate the color for each link based on the value in the linkColorBy column. It takes a link record as input and its index, and should return a color string or an array of [r, g, b, a] values.

Works only when linkColorBy is provided. Overrides the values in linkColorBy column by processing them (in this case the values in the linkColorBy column can be of any type, not just colors).

Param

The value from the LinkColor column.

Param

The index of the link.

Returns

The color as a string or an array of [r, g, b, a] value to be applied to the link.

Inherited from

CosmographDataConfig.linkColorByFn

linkWidthBy?

optional linkWidthBy: string

The column name for the link width.

If provided, links will have their widths set based on the values in this column, which should be numeric values.

Inherited from

CosmographDataConfig.linkWidthBy

linkWidthRange?

optional linkWidthRange: [number, number]

Defines the range for automatic link width scaling. Takes [min, max] values in pixels.

When linkWidthBy column contains numeric values, they will be automatically remapped to fit within this range to prevent oversized links if no linkWidthByFn provided.

Note: Only works when linkWidthBy column is provided and contains numeric values and when linkWidthByFn is not set.

Default

[1, 9]

Inherited from

CosmographDataConfig.linkWidthRange

linkWidthByFn?

optional linkWidthByFn: SizeAccessorFn<number> | SizeAccessorFn<string> | SizeAccessorFn<boolean> | SizeAccessorFn<unknown>

Specifies the function that will be used to generate the width for each link based on the value in the linkWidthBy column. It takes a link record as input and its index, and should return a numeric value.

Works only when linkWidthBy is provided. Overrides the values in the linkWidthBy column by processing them (in this case the values in the linkWidthBy column can be of any type, not just numbers).

Param

The value from the LinkWidth column.

Param

The index of the link.

Returns

The numeric width value to be applied to the link.

Inherited from

CosmographDataConfig.linkWidthByFn

linkArrowBy?

optional linkArrowBy: string

The column name that determines whether a link should have an arrow. If provided, links will have arrows based on the boolean values in this column.

Inherited from

CosmographDataConfig.linkArrowBy

linkArrowByFn?

optional linkArrowByFn: BooleanAccessorFn<string> | BooleanAccessorFn<number> | BooleanAccessorFn<unknown>

Specifies the function that determines if a link should have an arrow based on the value in the linkArrowBy column. It takes a link record as input and its index, and should return a boolean value.

Works only when linkArrowBy is provided. Overrides the values in the linkArrowBy column by processing them (in this case the values in the linkArrowBy column can be of any type, not just booleans).

Param

The value from the LinkArrow column.

Param

The index of the link.

Returns

A boolean indicating whether the link should have an arrow.

Inherited from

CosmographDataConfig.linkArrowByFn

linkStrengthBy?

optional linkStrengthBy: string

The column name for the link strength. If provided, links will have their strengths set based on the values in this column, which should be numeric values. Link strength affects the force simulation.

Inherited from

CosmographDataConfig.linkStrengthBy

linkStrengthByFn?

optional linkStrengthByFn: SizeAccessorFn<number> | SizeAccessorFn<string> | SizeAccessorFn<boolean> | SizeAccessorFn<unknown>

Specifies the function that will be used to generate the strength for each link based on the value in the linkStrengthBy column. It takes a link record as input and its index, and should return a numeric value.

Works only when linkStrengthBy is provided. Overrides the values in the linkStrengthBy column by processing them (in this case the values in the linkStrengthBy column can be of any type, not just numbers).

Param

The value from the LinkStrength column.

Param

The index of the link.

Returns

The numeric strength value to be applied to the link.

Inherited from

CosmographDataConfig.linkStrengthByFn

linkStrengthRange?

optional linkStrengthRange: [number, number]

Defines the range for automatic link strength scaling. Takes [min, max] values in the range [0, 1].

This setting can be used to control the strength of the links during the simulation.

Note: Only works when linkStrength column is provided and contains numeric values and when linkStrengthFn is not set. Has effect only during the active simulation.

Default

[0.2, 1.0]

Inherited from

CosmographDataConfig.linkStrengthRange

linkIncludeColumns?

optional linkIncludeColumns: string[]

An array of additional column names to include in the link data.

These columns will be available on the link objects but not used by Cosmograph directly, can be used as accessors for Cosmograph components. Useful for storing additional information about the links.

Inherited from

CosmographDataConfig.linkIncludeColumns

clusterPositionsMap?

optional clusterPositionsMap: Record<string, [number, number]>

Mapping of cluster keys to [x, y] coordinate positions. Keys should match values from the pointClusterBy column. Missing cluster keys will be automatically positioned using the centermass. Won’t take effect if point positions are provided by pointXBy or pointYBy.

Example

// Object mapping cluster keys to coordinates:
clusterPositionsMap: {
  'Rock': [10, 20],    // Cluster 'Rock' at position (10, 20)
  'Rap': [30, 40],     // Cluster 'Rap' at position (30, 40)
}

Remarks

If pointClusterByFn is provided, use keys as values of pointClusterBy after applying pointClusterByFn.

Inherited from

CosmographDataConfig.clusterPositionsMap

showLabels?

optional showLabels: boolean

Whether to show labels (except hovered) on the Cosmograph canvas. When true, labels are visible only if pointLabelBy is provided. Default: false

Inherited from

LabelsCosmographConfig.showLabels

showDynamicLabels?

optional showDynamicLabels: boolean

Show automatic labels for the evenly distributed points that are currently visible on the screen.

Works only when pointLabelBy is provided. Default: true

Inherited from

LabelsCosmographConfig.showDynamicLabels

showLabelsFor?

optional showLabelsFor: string[]

An array of point ids to show labels for.

Works only when pointLabelBy is provided. Default: undefined

Inherited from

LabelsCosmographConfig.showLabelsFor

showTopLabels?

optional showTopLabels: boolean

Show labels for the top points. Works only when pointLabelBy is provided. Default: true

Inherited from

LabelsCosmographConfig.showTopLabels

showTopLabelsLimit?

optional showTopLabelsLimit: number

Sets the maximum number of top points to show labels for. Default: 30

Inherited from

LabelsCosmographConfig.showTopLabelsLimit

showClusterLabels?

optional showClusterLabels: boolean

Show labels for the clusters based on the pointClusterBy column. When any point is selected, cluster labels will be hidden until the selection is cleared.

Has effect only when pointClusterBy is provided. Default: false

Inherited from

LabelsCosmographConfig.showClusterLabels

pointLabelColor?

optional pointLabelColor: string

Specifies the CSS color to use for the point labels.

If undefined, label will be colored as point.

Inherited from

LabelsCosmographConfig.pointLabelColor

pointLabelFontSize?

optional pointLabelFontSize: number

Specifies the font size to use for the point labels.

@default: 13

Inherited from

LabelsCosmographConfig.pointLabelFontSize

clusterLabelFontSize?

optional clusterLabelFontSize: number

Specifies the font size to use for the cluster labels.

@default: 16

Inherited from

LabelsCosmographConfig.clusterLabelFontSize

clusterLabelClassName?

optional clusterLabelClassName: string | (text, clusterIndex) => string

Specifies the CSS class to use for the cluster labels.

Param

The text of the label.

Param

The index of the cluster.

Returns

The CSS class/string to be applied to the cluster label. @default: 'background: #35374887; font-weight: 300; opacity: 0.9;'

Inherited from

LabelsCosmographConfig.clusterLabelClassName

scaleClusterLabels?

optional scaleClusterLabels: boolean

Whether to scale the cluster labels based on the number of points in the cluster. Default: true

Inherited from

LabelsCosmographConfig.scaleClusterLabels

usePointColorStrategyForClusterLabels?

optional usePointColorStrategyForClusterLabels: boolean

If true, cluster labels will acquire colors from the current point coloring strategy (pointColorStrategy). This can be useful when pointClusterBy and pointColorBy refer to the same data. Default: false

Inherited from

LabelsCosmographConfig.usePointColorStrategyForClusterLabels

pointLabelFn()?

optional pointLabelFn: (value, index?) => string

Specifies the function that will be used to generate the labels based on pointLabelBy column. It should return a string.

Works only when pointLabelBy is provided. Overrides the values specified in pointLabelBy column by processing them.

Parameters

Returns

string

Text of label.

Inherited from

LabelsCosmographConfig.pointLabelFn

pointLabelWeightFn()?

optional pointLabelWeightFn: (value, index?) => number

Specifies the function that will be used to generate the label weights. Should return a number between 0 and 1.

Works only when pointLabelWeightBy is provided. Overrides the values specified in pointLabelWeightBy column by processing them.

Parameters

Returns

number

Label weight value to be applied to the point label.

Inherited from

LabelsCosmographConfig.pointLabelWeightFn

pointLabelClassName?

optional pointLabelClassName: string | (text, pointIndexBy, pointIdBy?) => string

Specifies the CSS class to use for the point labels. This can either be a string specifying a fixed CSS class name or a function that returns a CSS class name based on the point index and optional point ID.

Remarks

When provided as a function, accepts:

Param

The text of the label.

Param

The index of the point.

Param

The optional ID of the point.

Returns

CSS class name to be applied to the point label.

Inherited from

LabelsCosmographConfig.pointLabelClassName

staticLabelWeight?

optional staticLabelWeight: number

Specifies the weight of the static labels. Default: 0.8

Inherited from

LabelsCosmographConfig.staticLabelWeight

dynamicLabelWeight?

optional dynamicLabelWeight: number

Specifies the weight of the dynamic labels. Default: 0.7

Inherited from

LabelsCosmographConfig.dynamicLabelWeight

labelMargin?

optional labelMargin: number

Specifies the margin between the label and the point. Default: 5

Inherited from

LabelsCosmographConfig.labelMargin

labelPadding?

optional labelPadding: [number, number, number, number]

Specifies the [left, top, right, bottom] padding of the label element. Default: [6.5, 4.5, 6.5, 4.5]

Inherited from

LabelsCosmographConfig.labelPadding

customLabels?

optional customLabels: CosmographCustomLabel[]

Specifies an array of custom labels to be displayed on the Cosmograph canvas. Each custom label is defined by the CosmographCustomLabel type, which includes properties for the label text, position, weight and optional CSS class.

Inherited from

LabelsCosmographConfig.customLabels

showFocusedPointLabel?

optional showFocusedPointLabel: boolean

Controls whether to show the label for the focused point.

Inherited from

LabelsCosmographConfig.showFocusedPointLabel

showHoveredPointLabel?

optional showHoveredPointLabel: boolean

Whether to show a hovered point label. Default: false

Inherited from

LabelsCosmographConfig.showHoveredPointLabel

hoveredPointLabelClassName?

optional hoveredPointLabelClassName: string | (text, pointIndexBy, pointIdBy?) => string

Specifies the CSS class to use for the hovered point label. This can either be a string specifying a fixed CSS class name or a function that returns a CSS class name based on the point index and optional point ID.

Param

The index of the point.

Param

The optional ID of the point.

Returns

The CSS class to be applied to the point label.

Inherited from

LabelsCosmographConfig.hoveredPointLabelClassName

simulationDecay?

optional simulationDecay: number

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

Inherited from

SimulationConfig.simulationDecay

simulationGravity?

optional simulationGravity: number

Gravity force coefficient. Default value: 0.25

Inherited from

SimulationConfig.simulationGravity

simulationCenter?

optional simulationCenter: number

Centering to center mass force coefficient. Default value: 0

Inherited from

SimulationConfig.simulationCenter

simulationRepulsion?

optional simulationRepulsion: number

Repulsion force coefficient. Default value: 1.0

Inherited from

SimulationConfig.simulationRepulsion

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

Inherited from

SimulationConfig.simulationRepulsionTheta

simulationRepulsionQuadtreeLevels?

optional simulationRepulsionQuadtreeLevels: number

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

Inherited from

SimulationConfig.simulationRepulsionQuadtreeLevels

simulationLinkSpring?

optional simulationLinkSpring: number

Link spring force coefficient. Default value: 1

Inherited from

SimulationConfig.simulationLinkSpring

simulationLinkDistance?

optional simulationLinkDistance: number

Minimum link distance. Default value: 10

Inherited from

SimulationConfig.simulationLinkDistance

simulationLinkDistRandomVariationRange?

optional simulationLinkDistRandomVariationRange: number[]

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

Inherited from

SimulationConfig.simulationLinkDistRandomVariationRange

simulationRepulsionFromMouse?

optional simulationRepulsionFromMouse: number

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

Inherited from

SimulationConfig.simulationRepulsionFromMouse

simulationFriction?

optional simulationFriction: number

Friction coefficient. Default value: 0.85

Inherited from

SimulationConfig.simulationFriction

simulationClusterStrength?

optional simulationClusterStrength: number

Coefficient of simulation cluster strength from 0 to 1. If undefined, the graph will not apply any clustering force to the simulation. Default value: undefined.

Inherited from

SimulationConfig.simulationClusterStrength

simulationImpulse?

optional simulationImpulse: number

Coefficient of simulation impulse from 0 to 1. If undefined, the graph will not apply a new impulse to the renders during adding or removing data items, but instead will use the current simulation impulse value from the graph. Has no impact if enableSimulation is false. Default value: undefined.

Inherited from

SimulationConfig.simulationImpulse

onSimulationStart()?

optional onSimulationStart: () => void

Callback function that will be called when the simulation starts.

Returns

void

Inherited from

SimulationEventConfig.onSimulationStart

onSimulationEnd()?

optional onSimulationEnd: () => void

Callback function that will be called when the simulation stops.

Returns

void

Inherited from

SimulationEventConfig.onSimulationEnd

onSimulationPause()?

optional onSimulationPause: () => void

Callback function that will be called when the simulation is paused.

Returns

void

Inherited from

SimulationEventConfig.onSimulationPause

onSimulationRestart()?

optional onSimulationRestart: () => void

Callback function that will be called when the simulation is restarted.

Returns

void

Inherited from

SimulationEventConfig.onSimulationRestart

onSimulationTick()?

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

Callback function that will be called on every tick of the simulation.

Parameters

Returns

void

Inherited from

SimulationEventConfig.onSimulationTick

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’

Inherited from

Omit.backgroundColor

spaceSize?

optional spaceSize: number

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

Inherited from

Omit.spaceSize

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’

Inherited from

Omit.pointColor

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

Inherited from

Omit.pointGreyoutColor

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

Inherited from

Omit.pointGreyoutOpacity

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

Inherited from

Omit.pointSize

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

Inherited from

Omit.pointOpacity

pointSizeScale?

optional pointSizeScale: number

Scale factor for the point size. Default value: 1

Inherited from

Omit.pointSizeScale

hoveredPointCursor?

optional hoveredPointCursor: string

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

Inherited from

Omit.hoveredPointCursor

renderHoveredPointRing?

optional renderHoveredPointRing: boolean

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

Inherited from

Omit.renderHoveredPointRing

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

Inherited from

Omit.hoveredPointRingColor

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

Inherited from

Omit.focusedPointRingColor

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

Inherited from

Omit.focusedPointIndex

renderLinks?

optional renderLinks: boolean

Turns link rendering on / off. Default value: true

Inherited from

Omit.renderLinks

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’

Inherited from

Omit.linkColor

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

Inherited from

Omit.linkOpacity

linkGreyoutOpacity?

optional linkGreyoutOpacity: number

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

Inherited from

Omit.linkGreyoutOpacity

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

Inherited from

Omit.linkWidth

linkWidthScale?

optional linkWidthScale: number

Scale factor for the link width. Default value: 1

Inherited from

Omit.linkWidthScale

scaleLinksOnZoom?

optional scaleLinksOnZoom: boolean

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

Inherited from

Omit.scaleLinksOnZoom

curvedLinks?

optional curvedLinks: boolean

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

Inherited from

Omit.curvedLinks

curvedLinkSegments?

optional curvedLinkSegments: number

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

Inherited from

Omit.curvedLinkSegments

curvedLinkWeight?

optional curvedLinkWeight: number

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

Inherited from

Omit.curvedLinkWeight

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

Inherited from

Omit.curvedLinkControlPointDistance

linkArrows?

optional linkArrows: boolean

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

Inherited from

Omit.linkArrows

linkArrowsSizeScale?

optional linkArrowsSizeScale: number

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

Inherited from

Omit.linkArrowsSizeScale

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]

Inherited from

Omit.linkVisibilityDistanceRange

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

Inherited from

Omit.linkVisibilityMinTransparency

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

Inherited from

Omit.useClassicQuadtree

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

Inherited from

Omit.enableRightClickRepulsion

simulationCluster?

optional simulationCluster: number

Cluster coefficient. Default value: 0.1

Inherited from

Omit.simulationCluster

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

Inherited from

Omit.onClick

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

Inherited from

Omit.onMouseMove

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

Inherited from

Omit.onPointMouseOver

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

Inherited from

Omit.onPointMouseOut

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

Inherited from

Omit.onZoomStart

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

Inherited from

Omit.onZoom

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

Inherited from

Omit.onZoomEnd

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

Inherited from

Omit.onDragStart

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

Inherited from

Omit.onDrag

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

Inherited from

Omit.onDragEnd

showFPSMonitor?

optional showFPSMonitor: boolean

Show WebGL performance monitor. Default value: false

Inherited from

Omit.showFPSMonitor

pixelRatio?

optional pixelRatio: number

Canvas pixel ratio. Default value: 2

Inherited from

Omit.pixelRatio

scalePointsOnZoom?

optional scalePointsOnZoom: boolean

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

Inherited from

Omit.scalePointsOnZoom

initialZoomLevel?

optional initialZoomLevel: number

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

Inherited from

Omit.initialZoomLevel

enableZoom?

optional enableZoom: boolean

Enables or disables zooming in and out. Default: true

Inherited from

Omit.enableZoom

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

Inherited from

Omit.enableSimulationDuringZoom

enableDrag?

optional enableDrag: boolean

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

Inherited from

Omit.enableDrag

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

Inherited from

Omit.fitViewOnInit

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

Inherited from

Omit.fitViewDelay

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

Inherited from

Omit.fitViewPadding

fitViewDuration?

optional fitViewDuration: number

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

Inherited from

Omit.fitViewDuration

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

Inherited from

Omit.fitViewByPointsInRect

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

Inherited from

Omit.randomSeed

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

Inherited from

Omit.pointSamplingDistance

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

Inherited from

Omit.rescalePositions