How to increase label padding in the nodes of a Vis.js network graph?

Question

When creating network graphs with Vis.js, the nodes in the network are drawn with labels that - for my use case - don't have enough 'padding', i.e., there is not enough space between the node label text and the border of the node. The following pic illustrates it:

Considering the vast amount of config options already available in Vis.js, I thought increasing label padding would be simple, but for the life of me, can't figure out how to do it. Have gone through the official docs, and have searched through StackOverflow and Google, but found no hints. Feel like I'm missing something obvious - can anyone shed a light?...

Answer 1

I found it - at least it's working for [email protected] which i installed with npm. They use margin to modify the space between the border and the label text.

The options object you pass in, it needs a margin property on the nodes property like this:

const options = {
  nodes: {
    margin: 10
  }
}

You can also specify different margins for top, bottom, right, left like this:

const options = {
  nodes: {
    margin: {
      top: 10,
      bottom: 20,
      left: 5,
      right: 5
  }
}

I can't seem to specify in anything but px - i tried to use '1em' for input, but it seems it only takes integer values - and expresses it in pixels.

In case you're curious, i found the information i needed from the options.js file located in node_modules\vis\lib\network. If you're looking for options for the other areas of vis (like timeline), i bet there is an options file for that in a similar folder.

Answer 2

This property is not yet customizable, however I managed to change it directly in the vis.js source file:

• Search for the Box class definition : var Box = function (_NodeBase)
• In the resize function there is the margin to modify : var margin = 5;
• Change it to whatever you want, and it's done