How to Set the Dimensions of Diagram in Percentage in JavaScript?

In the Syncfusion® JavaScript Diagram component, if you want to set the width and height in percentage values, it’s important to ensure that the parent container of the Diagram has an explicit height defined in pixels. This is required because percentage-based dimensions rely on the size of the parent element to calculate their actual size.

<div id="container" style="height:600px">
   <div id="element"></div>
</div> 

In this example, the #container div is given a fixed height (e.g., 600px). Then, you can configure the Diagram’s width and height in percentage (e.g., width: “100%”, height: “80%”) to make it responsive within the container.

Kindly refer to the working sample below:
Sample

Conclusion

I hope you enjoyed learning on how to set the height and width of the diagram component in percentage in JavaScript Diagram.
You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!