How do I resize my diagram when browser is resized

Question

Many other controls seem to have a responsive option, but I cannot find anything for a Diagram.

I don't want a scrollbar to appear on browser resizing.

How can I get my diagram to resize automatically?

Neill

Shyam G · Answer

Hi Neill, 

Could you please confirm us whether an diagram content size should be resized without an scrollbar when we resize the browser window? If yes, we can validate on it. Also, we have analyzed our competitors and they render a scrollbar on diagram when resize the browser window. 

Regards, 
Shyam G

Neill · Answer

Hi there,Yes I want a diagram I have created with nodes and connectors to be responsive and automatically resize.Currently when I resize the browser, the diagram stays the same size and it creates scroll bars.when I said "Many other controls", I was referring to examples like Syncfusion's Pie Chart:As an example I tested a Pie Chart that has a .IsResponsive property that when set to true, resizes the Pie Chart when you resize the browser..I want to be able to do this with a diagram.Neill

Shyam G · Answer

Hi Neill, 
 
Please use diagram fitToPage method in window resize function to achieve your requirement. If fitToPage method is executed, the diagram will be either ZoomIn/ZoomOut. By default, minZoom value is 0.25 and maxZoom value is 30. The diagram will not be zoomed beyond these values. So, you can set scrollSettings minZoom and maxZoom properties to change the zoom values. Please refer to the code example and help documentation. 
 
Code example: 
 
    $(window).resize(function () { 
            var diagram = $("#DiagramContent").ejDiagram("instance"); 
            diagram.fitToPage(); 
        }) 
 
            model.ScrollSettings.MinZoom = 0.2; 
            model.ScrollSettings.MaxZoom = 40; 
 
Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:fittopage 
 
 
Regards, 
Shyam G