Under certain circumstances, one may want FusionCharts to occupy 100% (or a certain percentage) width and height of the container element. This can be achieved using two methods using the jQuery Plugin for FusionCharts.

Using percentage value for width or height

If you set width: "100%" and / or height: "100%", it sets the HTML width and height of the object/embed tag of the chart to 100%. This makes the chart occupy the entire area of the parent container.

$("#myChartContainer").insertFusionCharts({
    width: "100%", height: "100%",
    data: "",
    dataFormat: "XMLData"
});

You can set any percentage value to make the charts occupy that percentage of width and height of the container element.

This method is even available if you are using standard FusionCharts.js file.

Using “auto” for width and height of the chart

This is a feature with FusionCharts jQuery plugin were, if you set width: "auto" and/or height: "auto", it sets the dimension of the chart to parent.width() and parent.height() respectively in pixels.

$("#myChartContainer").insertFusionCharts({
    width: "auto", height: "auto",
    data: "",
    dataFormat: "XMLData"
});

This approach is slightly different from the first (percentage) method in the sense that it sets the dimensions of the chart in pixels and it does not change in case the parent element’s dimension changes.

Precautions of using the percentage and auto methods

The above two methods have one limitation: In case the container has no set dimension or in case the container is not fully rendered, the chart does not receive the proper dimension. Owing to the fact that FusionCharts v3 and FusionCharts Free does not support native resizing as of now, it might render oddly.

As a workaround to the above issue, if we render the chart after the page is loaded using jQuery’s $(document).ready() event, this issue is partially fixed.

$(function() {
    $("#myChartContainer").insertFusionCharts({
        width: "auto", height: "auto",
        data: "",
        dataFormat: "XMLData"
    });
});