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.
Unfortunately, activation email could not send to your email. Please try again.

Out of Bounds

Thread ID:

Created:

Updated:

Platform:

Replies:

132272 Aug 23,2017 05:43 PM Aug 25,2017 07:37 AM JavaScript 4
loading
Tags: ejChart
Michael O'Connor
Asked On August 23, 2017 05:43 PM

When our charts are initially drawn they always draw outside of their container - a bit too far to the right.  If we do anything to cause them to be redrawn - like resize the browser - then they draw properly. What might cause them not to draw correctly the first time?



Dharanidharan Dharmasivam [Syncfusion]
Replied On August 24, 2017 05:44 AM

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suspect that the width of the container (div element in which the chart will render) is larger than the width specified in the chart. For example width specified in chart is 500pixel and the width specified to the div element is 400 pixel means with chart responsive(canResize/isResponsive property) is enabled, now the chart will render with specified width not with respect to div element size. So it seems the chart move from the container. And while resizing the chart will redraw and so, the chart will fit with respect to container width. We have replicated this scenario with below code example. 

JS: 

<div id="container" style="border:1px solid black;width:500px"></div>    
 
$("#container").ejChart( 
        { 
            //... 
            size: { height: "450", width:"600" },            
      }); 

In below screenshot, chart border is specified in red color while the div element border is specified in black color. 
Screenshot in initial rendering: 
 

Screenshot after resize: 
 

Sample for reference can be find from below link. 

To overcome the above issue, kindly specify same width in div and chart else you can specify width to either to div element or to chart. 

If this is not your case, then kindly revert us with the following details, which will be helpful in further analysis and provide you the solution sooner. 

  • Modify the attached sample or provide your sample with replication steps
  • Current version of Essential Studio you are using
  • Screenshot with the issue
  • Browser with version details in which the issue is reproduced

Thanks, 
Dharani. 



Michael O'Connor
Replied On August 24, 2017 04:34 PM

We don't set a width for the chart or the container. We don't know how wide the users screen is so we use percentages for the container. Can the charts be setup to work in this configuration?

thanks.


Michael O'Connor
Replied On August 24, 2017 06:45 PM

I have tried setting a percentage width but that results in the chart not drawing. It only accepts fixed pixel widths, which don't work for a page that resizes for users.


Sanjith Kesavan [Syncfusion]
Replied On August 25, 2017 07:37 AM

Hi Michael,  
Thanks for your revert. We have analyzed your queries. Please find the response for your queries below.  
Query1: We don't set a width for the chart or the container. We don't know how wide the users screen is so we use percentages for the container. Can the charts be setup to work in this configuration? 
Answer: Yes. We can set up the chart to work in this configuration. For this case, we can set width in “%”. Please find the below code example. 
 [JS] 
<div id="container" style="border:2px solid black;"></div>            
$("#container").ejChart({                
            size: { height: "450", width:"50%" },            
  }); 
  
In the above code, we have set the chart width as “50%” and height as 450. Now chart will take “50%” width of container and height as “450”. Please find the screenshot below. 
 
  
Query2: I have tried setting a percentage width but that results in the chart not drawing. It only accepts fixed pixel widths, which don't work for a page that resizes for users. 
Answer: If you want to maintain width and height of the chart in percentage, then atleast you have to mention height of the container <div>. Because if the height of the <div> is not mentioned then it is not possible to get the height of the container <div>. If height of container <div> is mentioned then as per the javascript behavior height will retuned as “0” and width of window will returned as width. For this 0 height and window’s width percentage values will be calculated. Since height is returned as 0 chart will render with 0 height and won’t get displayed in browser. This is current behavior of the chart.  
In the below link, we have attached sample for your reference 
Sample link: Chart 
Please let us know if you have any concern. 
  
Regards, 
Sanjith. 


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.

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.

;