Change Chart Properties at Runtime

This section shows you how you can change properties once the chart has been drawn. It is possible to configure the following

• Height and width of the chart
• Chart type
• Chart Properties like Fonts and Caption and Sub Caption Text

Changing height and width of the chart

Once you have initialized a chart, you can change the dimensions, at the client-side, through a JavaScript API using the resizeTo() method.

You can call the ‘resizeTo()’ method specifying the new width and height of your chart (in pixels) like this:

revenueChart.resizeTo(width, height);

You can call this method anytime after the chart has finished rendering.

The following chart shows you how a chart can be resized during runtime

Changing chart type

FusionCharts Suite XT makes it simple for you to change chart types using the ‘chartType()’ method. This method lets you convert from one chart type to another (as long as its the same type of data e.g., single-series).

The following snippet shows you how to call the ‘chartType()’ method.

revenueChart.chartType(newcharttype)

This API is useful when you want your users to be able to select the right view for their data, without you having to re-build the entire chart. You can call this method anytime after the chart has finished rendering.

Shown below is a sample where a simple column chart can be changed to a bar chart or a line chart.

Changing Chart properties

FusionCharts Suite XT makes it simple for you to change properties of a chart at the ‘chart’ level like Caption, Sub-Caption, Fonts, Themes etc using the ‘setChartAttribute’ method.

The following snippet shows you how to call the ‘setChartAttribute()’ method. The ‘caption’ and ‘subCaption’ are changed in this example

revenueChart.setChartAttribute({
    caption: "Chart Caption Text",
    subCaption: "Chart Sub Caption Text"
});

Shown here is a chart that allows you to change the Caption and Sub Caption text.

Similarly you can set the font size of the chart using the ‘baseFontSize’ attribute like this

revenueChart.setChartAttribute('baseFontSize', 24) ;

Shown here is a chart that allows you to change the font size at runtime.