Examples tagged UI

Accessibility newNavigate a graph using only keyboard controls and a screen reader

Undo redo Undo and redo changes made to the graph

Context menu Right-click a node to open a custom context menu

Editable notes and in-place forms Double-click nodes to edit rich text notes attached to them

Diagrams Visualize data flow with area and node overlays

Async load nodes metadata newShow a loading spinner on a node while fetching its data

Container resizing Resize the graph container on the fly

Export selection Select and export a specific area of the visualization

Background color Change the background color of the graph canvas

Dark mode This example shows how to implement a dark mode toggle in an Ogma graph

Cursor style Customize the mouse cursor on hover over nodes, edges, or canvas

Fullscreen Toggle the graph into fullscreen mode

Tooltip Build a tooltip using an overlay layer component

Legend Auto-generate a legend from the styles applied to the graph

Branding Add your logo, link, or copyright text to the visualization

Scrollable page Prevent the graph from capturing mouse scroll when not in focus

Fuzzy search Search for nodes by name and highlight matches in the graph

Import progressbar Show a circular progress indicator while a large graph loads

Nodes label editing Double-click a node's label to edit it inline

Overview control Show a minimap of the graph to track the current viewport

Grid background newAdd an SVG grid background behind the canvas

Multiple instances Run multiple independent graph instances on the same page

Timeline Filter the graph using a timeline slider

Time layout Display movies and actors as an event timeline graph

Timeline animation Animate the graph data over time

Timeline with node lifespans Show nodes with different start and end dates on a timeline

React Integrate the graph library into a React application

React + Minimap Add a minimap control to a React-based graph application

Vue Integrate the graph library into a Vue 3 application with the ogma-vue wrapper

Angular Integrate the graph library into an Angular application

Svelte Integrate the graph library into a Svelte application

Tooltip Build a tooltip using an overlay layer component