Choose an item Change Chart Properties at Runtime

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);
Were you able to implement this?

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)
Were you able to implement this?

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"
});
Were you able to implement this?

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) ;
Were you able to implement this?

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