OG
JS
Docs
Demos
Examples
Node style gallery
One compact view of circular fills, borders, glyphs, status dots, count capsules, and combinations.
6 style recipes · light theme
// Node records declare fills, borders, glyphs, badges, and combined treatments. // OGJS composes those attributes in one mark and preserves normal labels, picking, and // selection; applications only map domain state to style data. import { Ogjs } from '../../src/index'; const og = new Ogjs({ container: '#viz', theme: 'light' }); // Every item remains an ordinary node. Glyphs, badges, borders, dials, and beacons are // composable attributes, not separate DOM or canvas layers with independent lifecycles. og.setGraph({ nodes: [ { id: 'fill', label: 'Fill', x: -170, y: -80, size: 28, color: '#4f7fbf' }, { id: 'border', label: 'Border', x: 0, y: -80, size: 28, color: '#496a7d', borderWidth: 3, borderColor: '#d39a3c' }, { id: 'icon', label: 'Glyph', x: 170, y: -80, size: 30, color: '#8064b5', icon: 'DB' }, { id: 'badge', label: 'Status', x: -170, y: 90, size: 26, color: '#3f8f72', badgeColor: '#d66a72' }, { id: 'count', label: 'Count', x: 0, y: 90, size: 30, color: '#3f8fa6', icon: 'Q', badgeText: '12' }, { id: 'combined', label: 'Combined', x: 170, y: 90, size: 32, color: '#b86645', borderWidth: 3, borderColor: '#e9c875', icon: '!', badgeColor: '#4aa978', badgeText: '3' }, ], edges: [], }); // Fitting includes composed mark bounds and labels, so larger treatments remain visible // without the application calculating their rendered dimensions. og.camera.fit();