Out of Bounds

[Michael O'Connor]

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]

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. 

http://jsplayground.syncfusion.com/kujyzqv0  

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]

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]

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]

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.