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

Dynamic resizing

Hi,
Is it possible to dynamically resize the chart? 
I tried resizing the div that contains it, but while the div resizes the chart is cut.
can you help me?
thank you very much for your support.
Barbara Inzitari

7 Replies

BP Baby Palanidurai Syncfusion Team May 14, 2019 08:43 AM UTC

Hi Inzitari, 

Greetings from Syncfusion. 

We have analyzed your query. As of now, we are refreshed the charts on window resize only. If you want to refresh the charts for DIV element resize, you can refresh the chart manually in the resize events. For your reference, we have used jQuery resize for div element. Then we have refreshed the charts in jQuery resize event.  

Please find the below code snippet to achieve this requirement, 
 
<div id="container"> 
    @Html.EJS().Chart("container).Render() 
</div> 

<script> 
    $(function () { 
        $("#container").resizable({ 
            resize: function () { 
                var chart = document.getElementById('container').ej2_instances[0]; 
                chart.refresh(); 
            } 
        }); 
    }); 
</script> 


If the above doesn’t meet your requirement, kindly revert us by more details about your requirement which will be helpful in furthermore analysis and provide you solution sooner. 

Regards, 
Baby. 



NI nimue May 15, 2019 04:51 PM UTC

Thanks a lot for the answer.
my problem is that the div should automatically resize when the user opens the side menu. it's possible?
thanks for the support
Barbara Inzitari.


BP Baby Palanidurai Syncfusion Team May 16, 2019 12:04 PM UTC

Hi Nimue, 

Thanks for your update.  

We have prepared a sample based on your requirement. In that, we have shown the toggle menu bar by default and we have hide the menu, the div for the chart will get resize. You can refresh the chart there using refresh method. 

Code snippet:  

    $(document).ready(function () { 
        $('#sidebarCollapse').on('click', function () { 
            var chart = document.getElementById('container').ej2_instances[0]; 
            if ($('#sidebar')[0].style.display == 'none') { 
                $('#sidebar').show(); 
            } else { 
                $('#sidebar').hide(); 
            } 
            chart.refresh(); 
        }); 
    }); 

Screenshot: 

With toggle menu: 
 

Hide the toggle menu: 
 


If the sample doesn’t meet your requirement, kindly revert us with more details. 

Regards, 
Baby. 



NI nimue May 19, 2019 08:47 AM UTC

Hi Baby Palanidurai,

first of all thank you very much for the support you provide me.

I tried to use the example in my code and everything is fine as long as I use local data binding
but when I use remote data binding the div that contains the chart resizes itself while the chart is truncated.
in fact in my case the side menu pushes the area of the main content to visualize itself side by side 
and reduces the main content within the width of the screen, the div that contains the chart is resized and the same I would like it to do the chart .

Apart from the refresh there is something else I can do to force the chartto resize itself to the new measures of the div that contains it?
Anyway, thanks again for the support.
Barbara Inzitari


BP Baby Palanidurai Syncfusion Team May 20, 2019 09:36 AM UTC

Hi Nimue, 

Thanks for your update.  

We have analyzed your query and we have prepared a sample with using remote data binding. Unfortunately chart resizing is working fine when open the menu also.  

Sample used for testing, can be found from below link, 

Kindly revert us by modify the above sample or replicate your sample with replication steps to replicate the issue which will be helpful in furthermore analysis and provide you the solution sooner. 

Regards, 
Baby. 



NI nimue May 23, 2019 08:28 PM UTC

Hi Baby Palanidurai,
thank you for your support,
I finally understood what is wrong with my code and I will modify it in these days.
Barbara Inzitari



BP Baby Palanidurai Syncfusion Team May 24, 2019 06:08 AM UTC

Hi Inzitari,

Most welcome. Kindly revert us, if you need further assistance. We are always happy in assisting you.

Regards,
Baby.

Loader.
Live Chat Icon For mobile
Up arrow icon