OG
JS
Docs
Demos
Examples
Label recipe gallery
Per-node text supports hierarchy, multiline blocks, placement, priority, and bidirectional scripts.
5 recipes · default fallback · one collision budget
// Label recipes describe content, placement, priority, direction, and multiline behavior. // OGJS resolves collisions and zoom visibility internally, so applications provide // semantic text rules rather than measuring glyphs or positioning DOM labels. import { Ogjs } from '../../src/index'; const og = new Ogjs({ container: '#viz', theme: 'light' }); og.setGraph({ nodes: [ { id: 'primary', x: -150, y: -90, size: 20, color: '#2563eb', label: 'Primary' }, { id: 'alert', x: 125, y: -90, size: 18, color: '#dc2626', label: 'Alert' }, { id: 'rtl', x: 125, y: 105, size: 18, color: '#059669', label: 'Account' }, { id: 'priority', x: -155, y: 110, size: 13, color: '#7c3aed', label: 'Priority' }, { id: 'quiet', x: -110, y: 110, size: 13, color: '#94a3b8', label: 'Quiet' }, { id: 'silent', x: 0, y: 15, size: 10, color: '#64748b', label: 'Hidden label' }, { id: 'default', x: 0, y: 145, size: 12, color: '#0f766e', label: 'Default label' }, ], edges: [], }); // Recipes are keyed by stable node id. They may override text, add secondary lines, select a // placement, or hide a label without changing the node's graph data. og.labels.setRecipes([ ['primary', { text: ['Database', 'Primary'], secondary: '99.99% uptime', font: '700 15px system-ui, sans-serif', color: '#1d4ed8', secondaryColor: '#475569', pill: '#eff6ff', placement: 'left', lineHeight: 18, priority: 30 }], ['alert', { text: '3 anomalies', secondary: 'review now', color: '#b91c1c', secondaryColor: '#991b1b', pill: '#fef2f2', placement: 'above', priority: 40 }], ['rtl', { text: 'حساب رئيسي', secondary: 'دبي', direction: 'rtl', color: '#047857', secondaryColor: '#065f46', pill: '#ecfdf5', placement: 'right', priority: 20 }], ['priority', { text: 'Priority label', color: '#5b21b6', pill: '#f5f3ff', priority: 100 }], ['quiet', { text: 'Lower priority label', color: '#475569', pill: '#f8fafc', priority: 1, offset: [-20, 0] }], ['silent', { hidden: true }], ]); // Priority resolves collisions between the nearby labels, while direction and line-height are // handled by the label engine. The application does not measure text or compare rectangles. og.camera.fit({ target: 'all', paddingPx: 24, maxOccupancy: .29 });