Render Options

Pivotick allows you to customize how nodes, edges, and labels are rendered through the render option.

WARNING

All styles defined here apply only when render.type is set to svg.

Option	Type	Default	Description
type	'svg' | 'canvas'	'svg'	The rendering method. 'svg' uses SVG elements, 'canvas' uses the HTML canvas (experimental - not fully implemented).
renderNode	(node: Node) => HTMLElement | string | void	undefined	Custom renderer for nodes.
renderLabel	(edge: Edge) => HTMLElement | string | void	undefined	Custom renderer for edge labels.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Default styling applied to all nodes.
defaultEdgeStyle	EdgeStyle	defaultEdgeStyle	Default styling applied to all edges.
defaultLabelStyle	LabelStyle	defaultLabelStyle	Default styling applied to all edge labels.
markerStyleMap	Record<string, MarkerStyle>	defaultMarkerStyle	Custom styles for edge markers ('arrow', 'diamond', etc.). See MarkerStyle
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.
minZoom	number	0.1	Minimum zoom level.
maxZoom	number	10	Maximum zoom level.
zoomEnabled	boolean	true	Enable zoom.
selectionBox	SelectionBox	undefined	Control SelectionBox behavior

Type of rendering

TIP

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

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

The next three rendering examples are using the following data:

const data = {
    nodes: [
        { id: 1, data: { label: 'A', type: 'hub' } },
        { id: 2, data: { label: 'B', type: 'spoke' } }
    ],
    edges: [{ from: 1, to: 2 }]
}

Default rendering

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'circle',
            color: '#007acc',
            size: 12,
            strokeColor: '#fff',
            strokeWidth: 2,
            fontFamily: 'system-ui',
            textColor: '#fff'
        },
        defaultEdgeStyle: {
            markerStart: (edge: Edge) => edge.getData().mstart,
            markerEnd: 'arrow',
            curveStyle: 'straight',
        },
    }
}

Map-Accessor rendering

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.type,
        nodeStyleMap: {
            'hub': {
                shape: 'hexagon',
                color: '#f90',
                size: 25,
                text: (node) => node.getData()?.label
            },
            'spoke': {
                shape: 'triangle',
                color: '#09f'
            }
        },
    },
    UI: {
        mode: 'static'
    }
}

Custom callback rendering

const options = {
    render: {
        renderNode: (node: Node): HTMLElement | string | void => {
            const size = 12
            const color = '#09f'
            const style = [
                'display: block',
                `width: ${size}px`,
                `height: ${size}px`,
                `background-color: ${color}`,
                'border: 2px solid #fff',
                'border-radius: 50%',
                'opacity: 1',
            ].join(';')

            return `<span style="${style}"></span>`
        }
    }
}

Example for Map-Accessor rendering

API

Pivotick exposes a renderer controller that lets you interact directly with the rendering engine. All methods are available online

Fit and Zoom

Fit and center

graph.renderer.fitAndCenter()

Zomm in / out

graph.renderer.zoomIn()
graph.renderer.zoomOut()