Question - Is their a way to set the SVG container to be 100% width and height rather than px?

[mermicode]

Hi there! :)

I've been looking into this for quite some while and went through the docs but can't see anything. In the configuration of the graph we can add the width and height in px but not in % percent. Is there a way to go around this to have the area to be displayed in the 100% given screen rather than specifying the px?

thank you :)

[danielcaldas]

There's not out of the box way to achieve this at the moment. Have a look at this approach from @TranquilMarmot. Another way to do this, if you're going fullscreen is just to leverage the window.innerWidth/Height:

graphProps.config = Object.assign({}, graphProps.config, {
  height: window.innerHeight,
  width: window.innerWidth,
});

code from our sandbox

[antoninklopp]

As an example, Recharts has a special component to tackle this resizing/percentage issue which is called a Responsive container (demo here).

The component wraps the desired chart (graph in our case) and handles its size.

Is this something that would be interesting to implement here?

[mermicode]

Thank you both! :) I really appreciate you taking the time to answer. I went with the first solution but I like the look of Recharts! I'll see if I can fix my code to that

[danielcaldas]

Hey @mermicode, let us know how it goes; I would be Interested to know what you would get out of the mix.

[saravanabalagi]

My workaround is to add a div to graph, attach a ref to it, obtain its height and width, update the config once ref is attached to DOM (use a hook for config with initial value as null, update using setConfig). Trick is to render the graph only when config is not null. Demo | Full Code

Code

const MyGraph = () => {
  const [config, setConfig] = useState(null);
  const ref = useRef(null);

  useEffect(() => {
    const { current } = ref;
    if (!current) return;
    const { clientWidth, clientHeight } = current;
    const configNew = { ...myConfig, width: clientWidth, height: clientHeight };
    setConfig(configNew);
  }, [ref]);

  return (
    <div ref={ref} style={{height: '100%'}}>
      {config && (
        <Graph
          id="graph-id" // id is mandatory
          data={data}
          config={config}
          onClickNode={onClickNode}
          onClickLink={onClickLink}
        />
      )}
    </div>
  );
};

NB: if you initiate the hook to have initial config without height and width and update config once ref is not null like in here, it won't work as expected. This is because the config would be updated after the rendering of graph is started, leading to abrupt stops in animation, which in turn results in the nodes being randomly stuck during the animation at the top left of the screen. A simple setTimeout to setConfig with 3000 ms confirms this, it indeed updates width and height correctly allowing the bring to centre animation to execute and finish.