We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Get the coordinates of the viewport

Hello Syncfusion team,

Is there any way of getting the current viewport coordinates, for example in this case to get the X position starting 0 and ending 700, and the Y position starting 0 and ending 300. I just need those 4 numbers as the viewport changes.

3 Replies

GD Gobinath Dhamotharan Syncfusion Team February 9, 2023 09:25 AM UTC

We created a sample to achieve your requirement. We can get current viewport coordinates from diagram scrollSettings. Please refer to the below sample for your reference. 

Code snippet 

  public created() { 

    var ViewPortWidth = this.diagram.scrollSettings.viewPortWidth; 

    var ViewPortheight = this.diagram.scrollSettings.viewPortHeight; 

    console.log('ViewPortWidth = ' + ViewPortWidth); 

    console.log('ViewPortheight = ' + ViewPortheight); 









UN Unknown replied to Gobinath Dhamotharan February 9, 2023 11:55 AM UTC

Thank you for your fast reply but i think i need to reformulate my question

My question was if i can get the top left and right and bottom left and right coordinates that fit in the viewport as i zoom in zoom out and move inside the diagram, basically the numbers on the ruler shown

the top side of the ruler -125 and 75 and left side 0 and 50

BM Balasubramanian Manikandan Syncfusion Team February 10, 2023 01:15 PM UTC

Use the getDiagramBounds method to get the diagram viewport bounds. Refer to the below-mentioned code example and sample.

Code Snippet

public zoomIn(){


    var bounds = this.diagram.getDiagramBounds();



  public zoomOut(){


    var bounds1 = this.diagram.getDiagramBounds();





Live Chat Icon For mobile
Up arrow icon