Skip to content
  1. Examples

Secondary

This example shows how to use the secondaryText attribute on nodes and edges, allowing to display an extra text on each node and edge.

ts
import Ogma from '@linkurious/ogma';
const ogma = new Ogma({
  container: 'graph-container'
});

ogma.addNodes([
  {
    id: 0,
    attributes: {
      x: 0,
      y: 0,
      text: { content: 'Primary text', secondary: 'Secondary text' }
    }
  },
  { id: 1, attributes: { x: 100, y: 0, text: 'Only primary text' } },
  {
    id: 2,
    attributes: {
      x: 50,
      y: -35,
      text: {
        content: 'Both texts can be configured differently',
        backgroundColor: 'lightgreen',
        padding: 5,
        size: 13,
        style: 'bold',
        secondary: {
          content: 'Size, style, color, font, background',
          size: 12,
          color: 'firebrick',
          backgroundColor: 'lightblue',
          style: 'italic',
          padding: 3
        }
      }
    }
  }
]);
ogma.addEdges([
  {
    id: 0,
    source: 0,
    target: 1,
    attributes: {
      text: {
        content:
          'This is an edge primary text,\nit is always displayed above the edge',
        secondary:
          'This is an edge secondary text,\nit is always displayed below the edge'
      }
    }
  }
]);

await ogma.view.locateGraph({ padding: { bottom: 50 } });
html
<head></head>
<body>
  <title>Secondary text</title>

  <div
    id="graph-container"
    style="top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0"
  ></div>
  <script type="module" src="index.ts"></script>
</body>