Search code examples
javascriptfont-awesomevis.jsvis.js-network

Resize nodes in vis js which has label inside e.g. Circle, Box


How to set size of shapes in vis js which can have label inside? e.g.

Code1:

    shape: 'circle',
    color: {
        border: 'black',
        background: 'white'
    },
    borderWidth: 1,
    borderWidthSelected: 2,

in above Code1, if there is nothing in label to put in shape circle, then how i can increase/decrease the size of same.
If shape is anything for which label is put outside we can increase and decrease the size of icons. e.g.

Code2:

    shape: 'icon',
    icon: {
        face: 'FontAwesome',
        code: '\uf1db',
        size: 100,
        color: '#000000'
    }

As in above Code2 for icon 'size' option is available.
Is there any way to use 'size' option in Code1?


Solution

  • The documentation states

    "...The size is used to determine the size of node shapes that do not have the label inside of them. These shapes are: image, circularImage, diamond, dot, star, triangle, triangleDown, square and icon..."

    So the answer is no. (Details can be found here https://visjs.github.io/vis-network/docs/network/nodes.html)

    But as an workaround you could do something like this:

    shape: 'circle',
    scaling: {
        label: {
            enabled: true,
            min: 50,
            max: 50
        }
    },
    value: 1
    

    Where as with the scaling.label.min and scaling.label.max property, you could, change the size of the node. (but you will need a value, for the node) I hope this helps.