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

The .getDiagramContent() method returns a clipped diagram when called on a zoomed-in diagram.

Hi Syncfusion Team,

I'm using the latest version of diagram component in my app:"@syncfusion/ej2-angular-diagrams": "^17.3.34".

Since my diagram app uses SVG nodes. I have to call .getDiagramContent() and send it to a htmlToPdfConverter before I print/export it.

I've noticed that when my diagram is zoomed-in, the output of .getDiagramContent() shows a clipped diagram (clipped per original/unzoomed diagram's height, width dimensions). 

Please see the following attached files: 
  • zoom-none.png: original diagram with width: 900, height: 500 and zoomlevel: 1.
  • zoom-none-getDiagramContent.html: html string output from calling .getDiagramContent() on above diagram.
  • zoom-none-saveDiagram.JSON: json string output from calling .saveDiagram on above diagram.
  • zoom-144-png: zoomed-in diagram with width: 1296, height: 720 and zoomlevel: 1.44
  • zoom-144-getDiagramContent.html: html string output from calling .getDiagramContent() on above diagram
  • zoom-144-saveDiagram.JSON: json string output from calling .saveDiagram on above diagram.
As a result, I'm unable to print/export a zoomed-in diagram. 

I have to zoom back out (to ZoomLevel: 1) in order to get the diagram to print correctly.

Can you please confirm if this is a bug in .getDiagramContent() or whether I'm making some mistake in my app implementation.


2 Replies

MI Mithun January 13, 2020 01:55 PM UTC

And here are the attached files...

Attachment: repro_42c3617c.zip

SG Shyam G Syncfusion Team January 14, 2020 12:02 PM UTC

Hi Mithun, 
We have checked in our sample by zooming the diagram. We are unable to replicate an issue at our end. Could you please check in the below sample? Also, could you please upgrade our diagram control to the latest version 17.4.42 and check at your end? 
Shyam G 

Live Chat Icon For mobile
Up arrow icon