Skip to content
  1. Examples

Centered

This example shows how to use the position attribute on edge texts to display them at the center of the edges.

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

ogma.addNodes([
  {
    id: 0,
    attributes: {
      x: 10,
      y: 0
    }
  },
  { id: 1, attributes: { x: -10, y: 0 } }
]);
ogma.addEdges([
  {
    id: 0,
    source: 0,
    target: 1,
    attributes: {
      color: '#1499ff',
      text: {
        style: 'bold',
        color: '#fefefe',
        content: 'This is a centered text.',
        position: 'centered',
        secondary: 'This is an edge secondary text,\nit cannot be centered'
      }
    }
  }
]);

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>