Appearance

  2. Examples

Background color ​

stylesui

This example shows how to change the background color of the graph view. You can set it at the initialisation of Ogma, or using the setOptions method after initialisation.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container',
  options: {
    backgroundColor: '#514F6A'
  }
});

// Change the background after the initialization of Ogma.
ogma.setOptions({
  backgroundColor: '#514F6A'
});

const graph = await ogma.generate.random({ nodes: 10, edges: 20 });
await ogma.setGraph(graph);
await ogma.layouts.force({ locate: true });

ogma.styles.addNodeRule({
  color: 'white',
  text: {
    color: 'white',
    content: n => 'Node ' + n.getId(),
    minVisibleSize: 0
  }
});

ogma.styles.addEdgeRule({
  color: 'rgba(255, 255, 255, 0.3)',
  text: {
    color: 'white',
    content: e => 'Edge ' + e.getId()
  }
});

ogma.styles.setHoveredNodeAttributes({
  text: {
    backgroundColor: '#0A091D'
  }
});

ogma.styles.setHoveredEdgeAttributes({
  text: {
    backgroundColor: '#0A091D'
  }
});
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}