All versions of this documentation


Badges are "extensions" of node shapes. Nodes can have up to 4 badges (top left, top right, bottom left, bottom-right). Badges have a stroke, a background (color or image) and can contain text or icons.

Open in a new window.
          <!DOCTYPE html>

  <meta charset="utf-8">
  <link href="" rel="stylesheet">
  <script src="../build/ogma.min.js"></script>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;

  <div id="graph-container"></div>

  <!-- Force the loading of the font awesome -->
  <i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>

    'use strict';

    var COLORS = ['#965E04', '#C89435', '#F7A456', '#AFCF8A', '#7B39DE', '#B095C0',
      '#D24556', '#93C2FA', '#9DB09E', '#F8C821'];

    var ICONS = ['\uF11b', '\uF11c', '\uF024', '\uF128', '\uF129', '\uF130', '\uF131', '\uF3ed'];

    var ogma = new Ogma({
      container: 'graph-container'

    // Rules to specify the node style. Functions must be deterministic.
      color: function (n) { return COLORS[n.getId() % COLORS.length]; },
      text: function (n) { return 'Node ' + n.getId(); },
      radius: 15,
      badges: {
        bottomRight: {
          color: '#fff',
          text: {
            font: 'Font Awesome 5 Free', // Use FontAwesome icons.
            color: 'black', // Use the node color.
            // Retrieve the icon based on the node id.
            style: 'bold',
            content: function (n) { return ICONS[n.getId() % ICONS.length]; }
          stroke: {
            color: 'inherit', // Use the node color
            width: 1,

    // Generate a random graph
    ogma.generate.random({ nodes: 10, edges: 0 })
      .then(function (graph) {
        // Assign this graph to Ogma.

        // Change the badge of a single node: use a
        // background image and some text content.
          badges: {
            bottomRight: {
              image: 'flags/fr.svg',
              text: {
                font: 'Arial',
                style: 'bold',
                content: 'FR',
                color: 'black',