Sign in to follow this  
mschenkel

Chart not following "Responsive Design" 100% Height

Recommended Posts

I have embedded some charts into a page.  The page is configured to be "Responsive".  So I am setting the style of all the div tags to have height:100%.  In one particular instance some of the charts are not expanding, but instead are taking a height of 34.54px.  Using the Chrome Browser to drill down, I can see that the javascript is somehow making a span tag and setting the height to be 34.64px:

<span id="myChartId_31742" style="line-height: 100%; display: inline-block; zoom: 1; width: 99%; height: 34.65px; background-color: rgb(255, 255, 255);"> 

What could be causing this?  Take a look at the screen shot for some of the code wrapping the chart.

post-9100-0-86643400-1409174866_thumb.png

Share this post


Link to post
Share on other sites

I have embedded some charts into a page.  The page is configured to be "Responsive".  So I am setting the style of all the div tags to have height:100%.  In one particular instance some of the charts are not expanding, but instead are taking a height of 34.54px.  Using the Chrome Browser to drill down, I can see that the javascript is somehow making a span tag and setting the height to be 34.64px:

<span id="myChartId_31742" style="line-height: 100%; display: inline-block; zoom: 1; width: 99%; height: 34.65px; background-color: rgb(255, 255, 255);"> 

What could be causing this?  Take a look at the screen shot for some of the code wrapping the chart.

Hi,

 

Please note that since FusionCharts XT, charts can dynamically resize itself when the parent container resizes. For this you will need to :

>> Set the chart's size in percentage, and
>> Set your HTML chart container such that its dimension changes dynamically when the browser resizes or due to other changes taking place in the page (like when an element is added or removed)
 
Whenever the container element resizes, the chart will also dynamically resize itself instantly.
 
Hope this helps. :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this