Neo4j Visualization Library
    Preparing search index...

    Interface NvlOptions

    Configurations for a NVL instance

    interface NvlOptions {
        allowDynamicMinZoom?: boolean;
        callbacks?: ExternalCallbacks;
        disableAria?: boolean;
        disableTelemetry?: boolean;
        disableWebWorkers?: boolean;
        initialZoom?: number;
        instanceId?: string;
        layout?: Layout;
        layoutOptions?: LayoutOptions;
        maxFps?: number;
        maxZoom?: number;
        minFps?: number;
        minimapContainer?: HTMLElement;
        minZoom?: number;
        panX?: number;
        panY?: number;
        renderer?: Renderer;
        styling?: {
            defaultNodeColor?: string;
            defaultRelationshipColor?: string;
            disabledItemColor?: string;
            disabledItemFontColor?: string;
            dropShadowColor?: string;
            minimapViewportBoxColor?: string;
            nodeDefaultBorderColor?: string;
            overlayLineColor?: string;
            selectedBorderColor?: string;
            selectedInnerBorderColor?: string;
        };
    }
    Index
    allowDynamicMinZoom? callbacks? disableAria? disableTelemetry? disableWebWorkers? initialZoom? instanceId? layout? layoutOptions? maxFps? maxZoom? minFps? minimapContainer? minZoom? panX? panY? renderer? styling?
    allowDynamicMinZoom?: boolean

    Whether or not to dynamically allow decreasing minimum zoom value if current graph does not fit on screen at minimum zoom. When set to true, zoom and fit operations will allow zooming out further than minZoom if the graph does not fit on screen. minZoom is lowered to the new zoom level, so later zoom operations can go that low too. When set to false, zoom and fit operations will stop at the minimum zoom value, even if the full graph does not fit on screen at that zoom level.

    true
    callbacks?: ExternalCallbacks

    Callbacks for various events in the NVL instance.

    disableAria?: boolean

    Disables ARIA attributes on the graph. By default, NVL adds ARIA attributes to the graph container to make it more accessible. Attributes include role="image", aria-label="Graph visualization" and aria-describedby="nvl-${instanceId}-description". The description element is a live region that will announce changes to the graph.

    false
    disableTelemetry?: boolean

    Disables tracking of library usage

    false
    disableWebWorkers?: boolean

    Disables the use of web workers for the layout calculations.

    Only the hierarchical layout uses a worker (a SharedWorker from @neo4j-nvl/layout-workers). If the worker cannot be created, NVL logs a warning and attempts to fall back to synchronous layout automatically.

    initialZoom?: number

    Zoom value of the current viewport

    instanceId?: string

    Id for uniquely identifying the instance of Nvl

    layout?: Layout

    The graph layout algorithm to be used

    layoutOptions?: LayoutOptions

    Configuration for the current layout

    maxFps?: number

    Target maximum presentation fps while layout is active; extra time in the tick goes to layout stabilization. Budgets layout steps only. Actual fps may undershoot when rendering is expensive.

    30

    Will be capped between 1 and 120.

    maxZoom?: number

    The maximum zoom level allowed

    10
    minFps?: number

    Target minimum presentation fps while layout is active, at the cost of stabilization speed when set higher. Budgets layout steps only. Actual fps may undershoot when rendering is expensive.

    3

    Will be capped between 1 and 120.

    minimapContainer?: HTMLElement

    The DOM container in which to render the minimap.

    When using a React ref, make sure the attached element is rendered before the NVL instance is created. Otherwise, the minimap will not be displayed.

    minZoom?: number

    The minimum zoom level allowed

    0.075
    panX?: number

    X-coordinate for panning of the current viewport

    panY?: number

    Y-coordinate for panning of the current viewport

    renderer?: Renderer

    What rendering method to use for the visualization. WebGL renderer uses the GPU and has better performance. Captions are only displayed when using the canvas or svg renderer.

    'canvas'
    styling?: {
        defaultNodeColor?: string;
        defaultRelationshipColor?: string;
        disabledItemColor?: string;
        disabledItemFontColor?: string;
        dropShadowColor?: string;
        minimapViewportBoxColor?: string;
        nodeDefaultBorderColor?: string;
        overlayLineColor?: string;
        selectedBorderColor?: string;
        selectedInnerBorderColor?: string;
    }

    Styling options for the NVL instance.

    Type Declaration

    • OptionaldefaultNodeColor?: string

      The default color for nodes.

    • OptionaldefaultRelationshipColor?: string

      The default color for relationships.

    • OptionaldisabledItemColor?: string

      The color to use for the disabled nodes and relationships

    • OptionaldisabledItemFontColor?: string

      The color to use for the labels of the disabled nodes and relationships

    • OptionaldropShadowColor?: string

      The color to use for the drop shadow of selected/hovered nodes and relationships

    • OptionalminimapViewportBoxColor?: string

      The color to use for the viewport box in the minimap.

      Use overlayLineColor.

    • OptionalnodeDefaultBorderColor?: string

      The color to use for the default border of nodes

    • OptionaloverlayLineColor?: string

      Stroke color for overlay UI lines (e.g. minimap viewport box). Use a dark color on light backgrounds and a light color on dark backgrounds.

      #1A1B1D

    • OptionalselectedBorderColor?: string

      The color to use for the selected border of nodes and relationships

    • OptionalselectedInnerBorderColor?: string

      The color to use for the selected inner border of nodes and relationships

    Settings

    On This Page
    Properties