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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic resizing

Thread ID:

Created:

Updated:

Platform:

Replies:

144590 May 13,2019 05:16 PM UTC May 24,2019 06:08 AM UTC ASP.NET MVC - EJ 2 7
loading
Tags: Chart
nimue
Asked On May 13, 2019 05:16 PM UTC

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

Baby Palanidurai [Syncfusion]
Replied On 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. 


nimue
Replied On 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.

Baby Palanidurai [Syncfusion]
Replied On 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. 


nimue
Replied On 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

Baby Palanidurai [Syncfusion]
Replied On 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. 


nimue
Replied On 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


Baby Palanidurai [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon