Data Shapes

The graph is made up of 2 basic data shape objects you can pass to the graph.

GraphNode - The sphere element-like object that represents an entity in the graph
GraphEdge - The link between Nodes

GraphElementBaseAttributes

Base attributes shared by both GraphNode and GraphEdge.

Name	Type	Default
`id`	`string` ID of the element.
`data`	`T` Extra data associated with the element.
`label`	`string` Label for the element.
`subLabel`	`string` SubLabel for the element.
`size`	`number` Size of the element.
`labelVisible`	`boolean` Force label visible or not.

GraphNode

Extends GraphElementBaseAttributes with the following:

Name	Type	Default
`parents`	`string[]` ID of the parent node.
`icon`	`string` Icon URL for the node.
`fill`	`string` Fill color for the node.
`cluster`	`string` Cluster ID for the node.
`fx`	`number` Fixed X position for force-directed layouts.
`fy`	`number` Fixed Y position for force-directed layouts.
`fz`	`number` Fixed Z position for force-directed layouts.
`id`	`string` ID of the element.
`data`	`any` Extra data associated with the element.
`label`	`string` Label for the element.
`subLabel`	`string` SubLabel for the element.
`size`	`number` Size of the element.
`labelVisible`	`boolean` Force label visible or not.

GraphEdge

Extends GraphElementBaseAttributes with the following:

Name	Type	Default
`source`	`string` Source ID of the node.
`fill`	`string` Fill color for the edge.
`target`	`string` Target ID of the node.
`dashed`	`boolean` Whether the edge should be rendered with a dashed line pattern. When true, the edge will display with alternating dash and gap segments. Renders a solid line when false.	`false`
`dashArray`	`[number, number]` Dash pattern for the line: [dashSize, gapSize]	`[3, 1]`
`subLabelPlacement`	`"below" \| "above"` Placement of the subLabel relative to the main label. ‘below’: Show subLabel below the main label ‘above’: Show subLabel above the main label	`'below'`
`interpolation`	`"linear" \| "curved"` Type of edge interpolation (‘linear’ \| ‘curved’).	`'linear'`
`arrowPlacement`	`"none" \| "mid" \| "end"` Placement of the edge arrow (‘none’ \| ‘mid’ \| ‘end’).	`'end'`
`id`	`string` ID of the element.
`data`	`any` Extra data associated with the element.
`label`	`string` Label for the element.
`subLabel`	`string` SubLabel for the element.
`size`	`number` Size of the element.
`labelVisible`	`boolean` Force label visible or not.

Last updated on June 10, 2026

GraphCanvas Aggregate Edges