Charts not staying inside resizable containers.

[Austin Wade]

Hi,

I am using Sync fusion chart component inside a react component that allows the user to resize the container that it is in which is just a div, but when container is resized the chart does not stay in the container and flows outside of it. I am not referring to browser resize, but using libraries that allow the user to resize a certain HTML element. Is it possible to use sync fusion charts with resizable elements? Once again I am not talking about resizing the browser, but a certain HTML element that is resizable on the web page, with libraries such as react-resizable at https://github.com/STRML/react-resizable, I believe most of them use the same browser API for resizing HTML elements. Any help would be appreciated, it could just be that they are not compatible and I understand that, I just would like to know either way.  

Thanks again

[Durga Gopalakrishnan]

Hi Austin,

Greetings from Syncfusion.

We have analyzed your query. Your requirement can be achieved using dashboard layout. We have rendered chart inside panels, and you can resize the panel or move the panel position. We have attached sample for your reference. Please use three triangle dots on bottom right corner while moving mouse over panel to resize the panel.

Screenshot

Sample : https://stackblitz.com/edit/react-psffao-aqb4ns

To know more about dashboard layouts please check with below documentation and demo links.

UG Link : https://ej2.syncfusion.com/react/documentation/dashboard-layout/getting-started/

Online Demo : https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/dynamic

Please revert us if you have any concerns.

Regards,

Durga G