Vis JS Configuration

The Network Maps and Dependency Maps all use a common configuration for the vis.js library, which affects the way the maps are rendered, as well as the way that users can interact with the maps. This configuration can be adjusted by following the instructions below.

This link will show you all the options and explain what they do.

You may also access the dynamic configuration interface example here from within LibreNMS by adding the following to config.php

$config['network_map_vis_options'] = '{
  "configure": { "enabled": true},
}';

Note

You may want to disable the automatic page refresh while you're tweaking your configuration, as the refresh will reset the dynamic configuration UI to the values currently saved in config.php This can be done by clicking on the Settings Icon then Refresh Pause.

Configurator Output

Once you've achieved your desired map appearance, click the generate options button at the bottom to be given the necessary parameters to add to your config.php file. You will need to paste the generated config into config.php the format will need to look something like this. Note that the configurator will output the config with var options you will need to strip them out and at the end of the config you need to add an }'; see the example below.

$config['network_map_vis_options'] = '{
  "nodes": {
    "color": {
      "background": "rgba(20,252,18,1)"
    },
    "font": {
      "face": "tahoma"
    },
    "physics": false
  },
  "edges": {
    "smooth": {
      "forceDirection": "none"
    }
  },
  "interaction": {
    "hover": true,
    "multiselect": true,
    "navigationButtons": true
  },
  "manipulation": {
    "enabled": true
  },
  "physics": {
    "barnesHut": {
      "avoidOverlap": 0.11
    },
    "minVelocity": 0.75
  }
}';