Search code examples
javascriptvue.jsvis.js

vis js how to spread nodes evanly on all canvas and avoid text overlapping?

I am using vue-vis-network as my graph component.

this library relly on the Vis Js core library

and all configuration should be supported

I want to spread nodes evenly on all canvas and to avoid the text overlapping.

this is how it looks with the current options:

enter image description here

this is the current options that I use:

  options: {
    physics: {
      barnesHut: {
        springLength: 1000,
        springConstant: 1,
        avoidOverlap: 1
      }
    },
    nodes: {
      shape: 'dot',
      font: {
        size: 12
      }
    },
  },

il be happy for guidance on how to achieve my 2 main goals :

  1. spread the nodes on all canvas
  2. avoid node and text overlapping ( "correlation" and "conspiracy theory" as shown in the image)

thanks

Solution 
  •  physics: {
        barnesHut: {
            "gravitationalConstant": -3900,
            "centralGravity": 0
        },
        minVelocity: 1
    }

    Try the above options and check if you achieve your requirement.