How can I avoid labels overlapping?

Question

I'm trying to create a network containing nodes with long labels, but this results in the labels overlapping with each other, making it difficult to read them all clearly.

How can I separate those labels?

How can I align elements in one compound?

Answer 1

You can use avoidOverlap: true and nodeDimensionsIncludeLabels: true.

var layout = cy.elements().layout({
    name: 'dagre',
    avoidOverlap: true,
    nodeDimensionsIncludeLabels: true
});
layout.run();

Here I am using the cytoscape-dagre, but the same is possible with the layouts that come with cytoscape.js according to the documentation, for example with the grid layout.

Interestingly these options are not listed in the documentation of cytoscape-dagre, but they do work with it.