You can set percent values for chart width and height instead of absolute pixel values. The chart will automatically adjust its dimension with respect to the parent container element. Let's see how this is done in HTML.
<div id="chartContainer" style="width:800px; height:300px;">
This text is replaced by the chart
</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("Column3D.swf", "myChartId", "80%", "100%", "0", "1");
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
// --></script>
See it live!
In the above code, we have specified the width of the chart to be 80% and height -100%. The DIV with id - "chartContainer" is the container element of the chart. Hence, its width and height would be derived in percentage from the DIV's dimension.
In the example above, we have set the width of the DIV to 800 pixels and the height to 300 pixels. As such, the chart's size would automatically be 640x300. The chart would look like the image below:
Starting v3.2, FusionCharts can dynamically resize itself when the parent container resizes. For this you would 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 changes, due to some other changes made in a web page (like when an element is added/removed)
Whenever the container element resizes, the chart will also dynamically resize itself instantly.
In the example below, we've created a very basic sample where the chart would fill up the whole of web browser's space and if the browser's size is changed or adjusted, the chart would resize itself accordingly. Note the width and height declared for BODY and DIV elements using CSS.
<html>
<head>
<title>My First chart using FusionCharts
- Using dynamically resizable chart</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body style="height:100%;">
<div id="chartContainer" style="height:100%;" >
FusionCharts will load here
</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("FusionCharts/Area2D.swf", "myChartId", "100%", "100%", "0", "1");
myChart.setXMLUrl("LargeData.xml");
myChart.render("chartContainer");
// --></script>
</body>
</html>
See it live!
In the above code we have:
- Set the height of the body to be 100%
- Set the height of the container DIV to 100%, which means that it would vertically fill up the body space of the HTML. This is not required for width as a DIV, by default, takes the full width
- Set the chart's width and height to 100%