Configuration Options

Main Pivotick options

Pivotick supports a wide range of options to customize behavior, layout, rendering, simulation, UI, and interactions.

Option	Type	Default	Description
isDirected	boolean	true	If true, edges are treated as directed.
callbacks	InterractionCallbacks	{}	Optional callbacks for user interactions (click, hover, drag, etc.).
layout	LayoutOptions	{}	Configuration for the graph layout (forces, tree, spacing, alignment).
render	GraphRendererOptions	{}	Customize rendering options such as node/edge appearance
simulation	SimulationOptions	{}	Options to control the physics simulation (forces, iterations, etc.).
UI	GraphUI	{}	UI-specific options such as sidebar, selection, tooltips, and controls.

Usage

const container = document.getElementById('graph-container')
const options = { 
    isDirected: true,
    callbacks: {
        onNodeClick: (e, node) => console.log(`nodeClick: ${node.id}`),
    },
    layout: {
        type: 'force',
    },
    render: {
        defaultNodeStyle: {
            shape: 'square',
        },
    },
    simulation: {
        d3ManyBodyStrength: -30
    },
    UI: {
        mode: 'full'
    },
}
const graph = Pivotick(container, options)

Callbacks

Pivotick allows you to hook into user interactions and simulation events through the callbacks option. You can provide functions for various events generated by the user or the graph.

More info on the Callbacks page

Callback samples:

Callback	Parameters	Description
onNodeClick	(event: PointerEvent, node: Node, element: svg)	Fired when a node is clicked.
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	Fired when the mouse enters a node.
onSimulationTick	()	Fired on every simulation tick (useful for custom rendering).

INFO

The element type is svg only if the option render.type == "svg".

Example

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

Layout Options

Pivotick supports multiple layout strategies for positioning nodes. You can configure the layout through the layout option.

Option	Type	Default	Description
type	'force' | 'tree'	'force'	The layout algorithm to use. 'force' applies a physics-based force layout. 'tree' arranges nodes in a tree structure.

Tree Layout Options

When type: 'tree' is selected, you can choose the tree's direction and optionally arrange its nodes in a radial layout.

Option	Type	Default	Description
horizontal	boolean	false	Arrange nodes horizontally rather than vertically.
radial	boolean	false	Place nodes in a radial layout instead of vertical.

Example

import Pivotick from './pivotick.es.js'

const options = {
    layout: {
        type: 'tree',
        radial: true,
    // },
    // UI: {
    //     mode: 'static'
    }
}
const graph = new Pivotick(container, data, options)

Render Options

Pivotick allows you to customize how nodes, edges, and labels are displayed, and configure viewport interactions like zooming and multi-selection, using the render option.

Option	Type	Default	Description
renderNode	(node: Node) => HTMLElement | string | void	undefined	Custom renderer for nodes.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Default styling applied to all nodes.
nodeTypeAccessor	(node: Node) => string | undefined	undefined	Function to access the type of a node, used with nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	Maps node types (from nodeTypeAccessor) to styles.
zoomEnabled	boolean	true	Enable zoom.
dragEnabled	boolean	true	Enable dragging nodes.

Type of rendering

TIP

Pivotick gives you flexible control over rendering, from simple defaults to fully custom rendering. Here's a quick rundown:

• defaultNodeStyle, defaultEdgeStyle, and defaultLabelStyle define the base appearance for all elements.
• nodeTypeAccessor + nodeStyleMap allow dynamic styling based on each element's type.
• renderNode and renderLabel let you fully customize how nodes and labels are drawn (you can return HTML or text).

The next three rendering examples are using the following data:

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'square',
            size: 4,
            color: '#007acc',
            textColor: '#fff',
            strokeWidth: 0,
        },
        defaultEdgeStyle: {
            markerStart: 'circle',
            markerEnd: 'arrow',
        },
        defaultLabelStyle: {
            fontSize: '6px',
        },
    }
}

Simulation Options

The Simulation options control the physics and layout behavior of nodes and edges for the graph simulation engine.

Check D3-force official documentation to learn more.

Most of the time, there is no need to modify these options.

UI Options

Pivotick provides a flexible UI layer on top of your graph, allowing you to control how users interact with nodes, edges, and the canvas. Using UI options, you can:

• Configure the overall mode of the UI (full, viewer, static, etc.).
• Customize sidebar and panels to show properties or extra information.
• Define tooltips for nodes and edges, with optional custom renderers.
• Configure context menus and selection menus.

UI Mode

The mode option controls the overall behavior and interaction level of the graph UI.

• full default: Complete UI with all panels, menus, and interactions enabled.
• light: Minimal UI with essential interactions enabled.
• viewer: Only allows navigating the graph (pan, zoom, drag) without displaying any UI panels.
• static: Static graph, no UI panels or interactions; the graph is read-only.

For image-style usage of Pivotick, use the following:

const options = {
    UI: {  
        mode: 'viewer'
    },
}