Appearance
Options
Type:
Properties
backgroundColor(optional)
Color
[="white"]
Background color of the canvas.cursor(optional)
object
- default(optional)
CursorStyle
[="default"]
A CSS value for the cursor. - edge(optional)
CursorStyle
[="pointer"]
Cursor style when an edge is hovered. - node(optional)
CursorStyle
[="pointer"]
Cursor style when a node is hovered.
- default(optional)
detect(optional)
object
- edgeErrorMargin(optional)
number
[=2]
How far of the mouse an edge can be and still be detected, in pixels. - edgeTexts(optional)
boolean
[=true]
Indicates if the detection of edge texts should be enabled. - edges(optional)
boolean
[=true]
Indicates if the detection of edges should be enabled. - nodeBadges(optional)
boolean
[=true]
Indicates if the detection of node badges should be enabled. - nodeErrorMargin(optional)
number
[=5]
How far of the mouse a node can be and still be detected, in pixels. - nodeTexts(optional)
boolean
[=true]
Indicates if the detection of node texts should be enabled. - nodes(optional)
boolean
[=true]
Indicates if the detection of nodes should be enabled.
- edgeErrorMargin(optional)
directedEdges(optional)
boolean
[=false]
If true, edges of opposing directions will be not be mixed together visually.edgeMinTipSize(optional)
number
The minimum size of the edge tip.edgeTipRatio(optional)
number
The ratio of the edge tip size compared to the edge width.edgesAlwaysCurvy(optional)
boolean
[=false]
If true, all edges will be curved.imgCrossOrigin(optional)
CrossOriginValue
[="anonymous"]
Indicates the value of thecrossOrigin
field for DOM images.interactions(optional)
object
gesture(optional)
object
- enabled(optional)
boolean
[=true]
Indicates if zooming/rotating using two fingers should be enabled. - hideEdgeTexts(optional)
boolean
[=false]
Indicates if the edge texts should be hidden when zooming/rotating the view using two fingers. - hideEdges(optional)
boolean
[=false]
Indicates if the edges should be hidden when zooming/rotating the view using two fingers. - hideNodeTexts(optional)
boolean
[=false]
Indicates if the node texts should be hidden when zooming/rotating the view using two fingers. - hideNodes(optional)
boolean
[=false]
Indicates if the nodes should be hidden when zooming/rotating the view using two fingers.
- enabled(optional)
drag(optional)
object
- cursor(optional)
CursorStyle
[='move']
Cursor style to be applied while dragging the node - enabled(optional)
boolean
[=true]
Indicates if dragging nodes with the mouse should be enabled.
- cursor(optional)
pan(optional)
object
- enabled(optional)
boolean
[=true]
Indicates if moving the view with the mouse should be enabled. - hideEdgeTexts(optional)
boolean
[=false]
Indicates if the edge texts should be hidden when moving the view. - hideEdges(optional)
boolean
[=false]
Indicates if the edges should be hidden when moving the view. - hideNodeTexts(optional)
boolean
[=false]
Indicates if the node texts should be hidden when moving the view. - hideNodes(optional)
boolean
[=false]
Indicates if the nodes should be hidden when moving the view.
- enabled(optional)
rotation(optional)
object
- enabled(optional)
boolean
[=true]
Indicates if rotating the view with the mouse should be enabled. - hideEdgeTexts(optional)
boolean
[=false]
Indicates if the edge texts should be hidden when rotating the view. - hideEdges(optional)
boolean
[=false]
Indicates if the edges should be hidden when rotating the view. - hideNodeTexts(optional)
boolean
[=false]
Indicates if the node texts should be hidden when rotating the view. - hideNodes(optional)
boolean
[=false]
Indicates if the nodes should be hidden when rotating the view.
- enabled(optional)
selection(optional)
object
- enabled(optional)
boolean
[=true]
Indicates if selection with the mouse should be enabled - multiSelectionKey(optional)
KeyName|null
[="ctrl"]
Indicates the key that must be pressed to select multiple nodes/edges at a time.
- enabled(optional)
zoom(optional)
object
- duration(optional)
number
[=150]
Indicate the duration of a manual zoom. - easing(optional)
EasingFunction
[="cubicOut"]
Easing function to use for the zoom. - enabled(optional)
boolean
[=true]
Indicates if zoom on mouse wheel should be enabled. - hideEdgeTexts(optional)
boolean
[=false]
Indicates if the edge texts should be hidden when zooming manually. - hideEdges(optional)
boolean
[=false]
Indicates if the edges should be hidden when zooming manually. - hideNodeTexts(optional)
boolean
[=false]
Indicates if the node texts should be hidden when zooming manually. - hideNodes(optional)
boolean
[=false]
Indicates if the nodes should be hidden when zooming manually. - maxValue(optional)
null|ZoomBoundaryFunction
Function indicating the maximum possible zoom. By default, it's not possible to zoom so the smallest node takes more than 50% of the view. Set tonull
to remove the limit. - metaKey(optional)
'ctrl'|'alt'|'shift'|'space'
[='ctrl/cmd']
Modifier button to use for zooming with the mousewheel or trackpad whenscrollToPan
is enabled. By default it's thectrl
(⌘
on Mac) key. - minValue(optional)
null|ZoomBoundaryFunction
Function indicating the minimum possible zoom. By default, it's not possible to zoom so the graph takes less than 20% of the view. Set tonull
to remove the limit. - modifier(optional)
number
[=Math.SQRT2]
Indicate the zoom multiplier on the manual zoom. - onDoubleClick(optional)
boolean
[=false]
Indicates if zoom on double click should be enabled. - scrollToPan(optional)
boolean
[=false]
Indicates if the view should be moved when scrolling with mousewheel or trackpad - speed(optional)
number
[=0.15]
The speed of the zoom on mouse wheel.
- duration(optional)
minimumHeight(optional)
number
[=300]
Minimum container height in pixels.minimumWidth(optional)
number
[=300]
Minimum container width in pixels.mouse(optional)
object
- disableWheelUntilMouseDown(optional)
boolean
[=false]
If true, the canvas will not take the focus of the mouse until the user clicks on it. - doubleClickTimer(optional)
boolean
[=500]
After a click, amount of time after which a second click won't trigger a double click event - enabled(optional)
boolean
[=true]
Indicates if the mouse should be enabled - wheelEnabled(optional)
boolean
[=true]
Indicates if the mouse wheel should be enabled.
- disableWheelUntilMouseDown(optional)
renderer(optional)
RendererType
[="webgl"]
Rendering type. If WebGL is selected and not available, Ogma will fallback on Canvas. If no renderer is available (e.g in Node.js), Ogma will fallback on headless mode (null
).texts(optional)
object
- cornerRadius(optional)
number
[=5]
Controls the radius of the rounded corners of text boxes. Set to 0 to get non rounded corners. - hideUntilFontsLoaded(optional)
boolean
[=true]
Iftrue
, texts & icons won't be displayed until the browser has finished loading the fonts. This prevents texts from showing up with the default font during the short time between Ogma initialization and the moment fonts are loaded. - preventOverlap(optional)
boolean
[=true]
Detect and remove overlapping of texts.
- cornerRadius(optional)
touch(optional)
object
- enabled(optional)
boolean
[=true]
Indicates if the touch should be enabled
- enabled(optional)