Zoom fit to diagram size

Question

I would like to know if there is a way to indicate that zoom should be adapted to diagram size to without using the function fitToPage or any other function, I would like to achieve this only specifying some value on one of the properties inside the JSON diagram generated by Syncfusion.

Suganthi Karuppannan · Answer

Hi Víctor Manuel, 
 
We have created a sample for diagram elements are fit the diagram bounds. The “created” event triggered after the diagram is created. Using this event you can get the diagram bounds and change the zoom factor to fit the diagram elements concerning the diagram bounds. Please refer to the below sample link. 
 
Sample Link: https://stackblitz.com/edit/react-qkidu6?file=index.js 
 
If we misunderstood your requirement, please share more details like sample demo, video image. This will be helpful for us to serve you better. 
 
 
Regards,   
Suganthi K.

Víctor Manuel Calle Sánchez · Answer

Hi Suganthi,Sorry for my explanation, I will try again giving more details. I'm developing a program so I can generate the JSON necessary for Syncfusion to represent one diagram, so what I would like to do is to set the zoom in this JSON in a way that the diagram will be shown completely since the first moment. For example, if I have the JSON necessary to represent this diagram (with zoom 1 by default):I would like to know the way to change the zoom in the JSON so when diagram is loaded I can see it like this:Thanks in advance.

Shyam G · Answer

Hi Victor, 

Please use diagram fitToPage method which fits the diagram content within the viewport. We have modified the sample in which we have set the fitToPage method in the created event. Please refer to a code example and the sample below. 

Code example: 




  created={() => { 
          //fits the diagram content within the viewport 
          diagramInstance.fitToPage(); 
        }}  


Sample: https://stackblitz.com/edit/react-qkidu6-fbbgf1?file=index.js 

Regards, 
Shyam G