I have a React ponent that renders a Cytoscape dagre graph once some data has been fetched from the server. It seems to render a canvas that takes up the right half of the parent <div id="cy" />. Calling cy.center() and cy.fit() centers and fits the graph itself to the parent div, but only half the visualisation is shown because the containing canvas is half off the screen.

Setting the following CSS:

position: absolute;
left: 0;
right: 0;

on the container, as in all the online examples, will center the canvas, but breaks the flow of the document. It also doesn't resolve the half size issue.

The JSX:

  if (moduleStructure) {
    return (
      <div
        id="cy-module-structure"
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          height: "500px",
          width: "1500px",
          display: "block",
        }}
      />
    );
  }

The graph generation code. This is called by a React hook after the data has been fetched.

  function generateGraph(nodes, edges) {
    cytoscape.use(dagre);
    const cy = cytoscape({
      container: document.getElementById("cy-module-structure"),
      boxSelectionEnabled: false,
      autounselectify: true,
      layout: {
        name: "dagre",
        nodeDimensionsIncludeLabels: true,
      },
      zoom: 1,
      pan: { x: 0, y: 0 },
      style: [
        {
          selector: "node",
          style: {
            content: "data(label)",
            "text-valign": "center",
            "text-halign": "center",
            "background-color": "#11479e",
          },
        },
        {
          selector: "edge",
          style: {
            width: 4,
            "target-arrow-shape": "triangle",
            "line-color": "#9dbaea",
            "target-arrow-color": "#9dbaea",
            "curve-style": "bezier",
          },
        },
      ],
      elements: {
        nodes,
        edges,
      },
    });

    cy.ready(() => {
      cy.center();
      cy.fit();
      cy.resize();
    });
  }

And finally the parent JSX:

      <div className="top-flex"> // flex-direction: row: 
        <Diagram /> // Cytoscape ponent
        <div className="basic-info">
          <H3>TEXT</H3>
          <small>INFO</small>
        </div>
      </div>

Ideally the graph should take up the full width of the parent div. In the screenshot, you can see the effect described above.

I have a React ponent that renders a Cytoscape dagre graph once some data has been fetched from the server. It seems to render a canvas that takes up the right half of the parent <div id="cy" />. Calling cy.center() and cy.fit() centers and fits the graph itself to the parent div, but only half the visualisation is shown because the containing canvas is half off the screen.

Setting the following CSS:

position: absolute;
left: 0;
right: 0;

on the container, as in all the online examples, will center the canvas, but breaks the flow of the document. It also doesn't resolve the half size issue.

The JSX:

  if (moduleStructure) {
    return (
      <div
        id="cy-module-structure"
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          height: "500px",
          width: "1500px",
          display: "block",
        }}
      />
    );
  }

The graph generation code. This is called by a React hook after the data has been fetched.

  function generateGraph(nodes, edges) {
    cytoscape.use(dagre);
    const cy = cytoscape({
      container: document.getElementById("cy-module-structure"),
      boxSelectionEnabled: false,
      autounselectify: true,
      layout: {
        name: "dagre",
        nodeDimensionsIncludeLabels: true,
      },
      zoom: 1,
      pan: { x: 0, y: 0 },
      style: [
        {
          selector: "node",
          style: {
            content: "data(label)",
            "text-valign": "center",
            "text-halign": "center",
            "background-color": "#11479e",
          },
        },
        {
          selector: "edge",
          style: {
            width: 4,
            "target-arrow-shape": "triangle",
            "line-color": "#9dbaea",
            "target-arrow-color": "#9dbaea",
            "curve-style": "bezier",
          },
        },
      ],
      elements: {
        nodes,
        edges,
      },
    });

    cy.ready(() => {
      cy.center();
      cy.fit();
      cy.resize();
    });
  }

And finally the parent JSX:

      <div className="top-flex"> // flex-direction: row: 
        <Diagram /> // Cytoscape ponent
        <div className="basic-info">
          <H3>TEXT</H3>
          <small>INFO</small>
        </div>
      </div>

Ideally the graph should take up the full width of the parent div. In the screenshot, you can see the effect described above.

• javascript
• css
• reactjs
• cytoscape.js

• I had this exact problem, and for me it was that a higher level style applied was text-align: center. Removing that aligned things correctly. – Jim Commented Apr 15, 2019 at 17:02
• 1 This was the problem - top level style applied to .App of text-align center. Much appreciated. If you add this as an answer I'll accept. – mtbhacht Commented Apr 25, 2019 at 16:31

2 Answers 2

The problem is that a higher level style was applied text-align: center. Removing that should align things correctly.

(1) Your ordering of resize and fit is reversed. It doesn't make sense to fit if you're going to resize afterwards. Fitting happens on the available bounds.

(2) Make sure you mount Cytoscape only after ponentDidMount().

(3) The container must be something like position:relative or position:absolute (definitely not position:static) such that the children of container can be positioned relative to container. Cytoscape.js will set position:relative by default, so it's sensibly set unless you override it.