CODEWITHSUNDEEP
cytoscape.js
Espresso
Espresso

Reputation: 920

Is there a way to make a Cytoscape.js graph responsive?

What I mean by this is that if the user changes the size of the browser window, I would like the graph to re-render and fit into the new space. Currently, if I resize the window, the graph (nodes and edges) do not change size.

You can see this be resizing your browser window when viewing any of the demos, for example: Cyctoscape.js Demo

Upvotes: 1

Views: 1195

Answers (1)

Corentin
Corentin

Reputation: 102

The cytoscape function you're probably looking for is "cy.center". According to the docs, the function "pans the graph to the centre of a collection".

So you just have to catch the resize event and the page will automatically re-center on the graph every time the window is resized.

Result:

window.addEventListener('resize', function(event){
    cy.center();
});

Upvotes: 1

Related Questions