Examples tagged Styles

iPhone parts origin See where iPhone parts come from, grouped by country

IT Management demo Reorganize and filter IT infrastructure nodes by group or type

Radius Change the size of nodes using the radius setting

Color Change the color of text labels

Color pie Show a pie chart inside each node using color segments

Shape Change edge shapes — line style, head, tail, body type

Text Add text labels along edges

Stroke Add inner and outer strokes around nodes

Outline Add a shadow outline to edges

Icon Display icons inside nodes using font glyphs like Lucide or FontAwesome

Image Display images (PNG, JPG, SVG) inside nodes

Badge Add a small badge along edges

Halo Add a halo glow beneath edges

Pulse Animate a pulse effect along edges

Custom charts Render custom donut charts or textures directly on nodes

All styles Interactively tweak every available node and edge style

Themes Apply a visual theme that styles the graph in various states

Zoom-dependent styles Load icons only when nodes are large enough to show them on screen

Z-index newControl which nodes appear on top when they overlap

Width Adjust the thickness of edges

Color Change the color of text labels

Shape Change edge shapes — line style, head, tail, body type

Text Add text labels along edges

Badge newAdd a small badge along edges

Outline Add a shadow outline to edges

Halo Add a halo glow beneath edges

Pulse Animate a pulse effect along edges

Parallel Show multiple curved edges between the same two nodes

Arrow size Adjust the size of arrowheads on directed edges

Zoom-dependent texts Update edge label size and content as you zoom in or out

Data Lineage Trace which datasets produced a given report in a pipeline

Betweenness Color and scale nodes by their betweenness centrality score

Other centrality measures Compare degree, closeness, betweenness, and PageRank measures

Community detection newThis example demonstrates the Leiden community detection algorithm — an improvement over the Louvain algorithm that guarantees well-connected communities. A…

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

All settings Browse and tweak Ogma interaction settings

Grid background newAdd an SVG grid background behind the canvas

US Airlines Render and navigate a large US airline routes graph