interface CytoscapeOptions {
    autolock?: boolean;
    autoungrabify?: boolean;
    autounselectify?: boolean;
    boxSelectionEnabled?: boolean;
    container?: null | HTMLElement;
    data?: Record<string, any>;
    desktopTapThreshold?: number;
    elements?:
        | ElementsDefinition
        | Promise<ElementsDefinition>
        | ElementDefinition[]
        | Promise<ElementDefinition[]>;
    headless?: boolean;
    hideEdgesOnViewport?: boolean;
    hideLabelsOnViewport?: boolean;
    layout?: LayoutOptions;
    maxZoom?: number;
    minZoom?: number;
    motionBlur?: boolean;
    motionBlurOpacity?: number;
    pan?: Position;
    panningEnabled?: boolean;
    pixelRatio?: number | "auto";
    selectionType?: SelectionType;
    style?: Stylesheet[] | Promise<Stylesheet[]>;
    styleEnabled?: boolean;
    textureOnViewport?: boolean;
    touchTapThreshold?: number;
    userPanningEnabled?: boolean;
    userZoomingEnabled?: boolean;
    wheelSensitivity?: number;
    zoom?: number;
    zoomingEnabled?: boolean;
}

Properties

autolock?: boolean

Whether nodes should be locked (not draggable at all) by default (if true, overrides individual node state).

The default value is false.

autoungrabify?: boolean

Whether nodes should be ungrabified (not grabbable by user) by default (if true, overrides individual node state).

The default value is false.

autounselectify?: boolean

Whether nodes should be unselectified (immutable selection state) by default (if true, overrides individual element state).

The default value is false.

boxSelectionEnabled?: boolean

Whether box selection (i.e. drag a box overlay around, and release it to select) is enabled. If enabled, the user must taphold to pan the graph.

The default value is false.

container?: null | HTMLElement

A HTML DOM element in which the graph should be rendered. This is optional if Cytoscape.js is run headlessly or if you initialise using jQuery (in which case your jQuery object already has an associated DOM element).

The default is undefined.

data?: Record<string, any>

A plain object that contains graph-level data (i.e. data that does not belong to any particular node or edge).

desktopTapThreshold?: number

A nonnegative integer that indicates the maximum allowable distance that a user may move during a tap gesture, on touch devices and desktop devices respectively.

This makes tapping easier for users. These values have sane defaults, so it is not advised to change these options unless you have very good reason for doing so. Larger values will almost certainly have undesirable consequences.

The default value is 4.

elements?:
    | ElementsDefinition
    | Promise<ElementsDefinition>
    | ElementDefinition[]
    | Promise<ElementDefinition[]>

An array of [[Elements]] specified as plain objects. For convenience, this option can alternatively be specified as a promise that resolves to the elements JSON.

headless?: boolean

A convenience option that initialises the Core to run headlessly. You do not need to set this in environments that are implicitly headless (e.g. Node.js). However, it is handy to set headless: true if you want a headless Core in a browser.

The default value is false.

hideEdgesOnViewport?: boolean

When set to true, the renderer does not render edges while the viewport is being manipulated. This makes panning, zooming, dragging, et cetera more responsive for large graphs.

The default value is false.

hideLabelsOnViewport?: boolean

when set to true, the renderer does not render labels while the viewport is being manipulated. This makes panning, zooming, dragging, et cetera more responsive for large graphs.

The default value is false.

layout?: LayoutOptions

A plain object that specifies layout options. Which layout is initially run is specified by the name field. Refer to a layout's documentation for the options it supports. If you want to specify your node positions yourself in your elements JSON, you can use the preset layout — by default it does not set any positions, leaving your nodes in their current positions (e.g. specified in options.elements at initialisation time)

maxZoom?: number

A maximum bound on the zoom level of the graph. The viewport can not be scaled larger than this zoom level.

The default value is 1e50.

minZoom?: number

A minimum bound on the zoom level of the graph. The viewport can not be scaled smaller than this zoom level.

The default value is 1e-50.

motionBlur?: boolean

When set to true, the renderer will use a motion blur effect to make the transition between frames seem smoother. This can significantly increase the perceived performance for a large graphs.

The default value is false.

motionBlurOpacity?: number

When motionBlur: true, this value controls the opacity of motion blur frames. Higher values make the motion blur effect more pronounced.

The default value is 0.2.

pan?: Position

The initial panning position of the graph. Make sure to disable viewport manipulation options, such as fit, in your layout so that it is not overridden when the layout is applied.

panningEnabled?: boolean

Whether panning the graph is enabled, both by user events and programmatically.

The default value is true.

pixelRatio?: number | "auto"

Overrides the screen pixel ratio with a manually set value (1.0 or 0.666 recommended, if set). This can be used to increase performance on high density displays by reducing the effective area that needs to be rendered. If you want to use the hardware's actual pixel ratio at the expense of performance, you can set pixelRatio: 'auto'.

The default value is 1.

selectionType?: SelectionType

A string indicating the selection behaviour from user input. By default, this is set automatically for you based on the type of input device detected. On touch devices, 'additive' is default — a new selection made by the user adds to the set of currenly selected elements. On mouse-input devices, 'single' is default — a new selection made by the user becomes the entire set of currently selected elements (i.e. the previous elements are unselected).

The default value is (isTouchDevice ? 'additive' : 'single').

style?: Stylesheet[] | Promise<Stylesheet[]>

The [[Stylesheet]] used to style the graph. For convenience, this option can alternatively be specified as a promise that resolves to the stylesheet.

styleEnabled?: boolean

A boolean that indicates whether styling should be used. For headless (i.e. outside the browser) environments, display is not necessary and so neither is styling necessary — thereby speeding up your code. You can manually enable styling in headless environments if you require it for a special case. Note that it does not make sense to disable style if you plan on rendering the graph.

The default value is true.

textureOnViewport?: boolean

When set to true, the renderer uses a texture (if supported) during panning and zooming instead of drawing the elements, making large graphs more responsive.

The default value is false.

touchTapThreshold?: number

A nonnegative integer that indicates the maximum allowable distance that a user may move during a tap gesture, on touch devices and desktop devices respectively.

This makes tapping easier for users. These values have sane defaults, so it is not advised to change these options unless you have very good reason for doing so. Larger values will almost certainly have undesirable consequences.

The default value is is 8.

userPanningEnabled?: boolean

Whether user events (e.g. dragging the graph background) are allowed to pan the graph. Programmatic changes to pan are unaffected by this option.

The default value is true.

userZoomingEnabled?: boolean

Whether user events (e.g. mouse wheel, pinch-to-zoom) are allowed to zoom the graph. Programmatic changes to zoom are unaffected by this option.

The default value is true.

wheelSensitivity?: number

Changes the scroll wheel sensitivity when zooming. This is a multiplicative modifier. So, a value between 0 and 1 reduces the sensitivity (zooms slower), and a value greater than 1 increases the sensitivity (zooms faster).

The default value is 1.

zoom?: number

The initial zoom level of the graph. Make sure to disable viewport manipulation options, such as fit, in your layout so that it is not overridden when the layout is applied. You can set options.minZoom and options.maxZoom to set restrictions on the zoom level.

The default value is 1.

zoomingEnabled?: boolean

Whether zooming the graph is enabled, both by user events and programmatically.

The default value is true.

MMNEPVFCICPMFPCPTTAAATR