FusionCharts XT Styles

You are viewing documentation for an older version. For current documentation - click here.

FusionCharts XT uses Styles to help you apply font, effects and animations to various objects of the chart. Styles lends a simple mechanism using which you can easily control the visual layout of charts.

The chart below is setup to live-demonstrate some of the basic features of Styles. It has beveled column. In case you have missed the animation, you can again recheck the animation clicking on the button below saying - "Click here to animate the chart above".

The chart is supposed to load here. If you are unable to see the chart here and can see this message, please check Basic Troubleshooting page.

To use Styles, all you need to do is:

Define your own style attributes in the XML/JSON data document, and
Associate (that is, apply) them with defined Objects of the chart.

Starting FusionCharts XT, each object on the chart has been assigned a unique name, for direct association with style definitions. For example, the background of the chart is termed as BACKGROUND. Similarly, the plot (columns, lines, areas etc.) on the chart is named as DATAPLOT. This enables you to associate each style to multiple chart objects or associate multiple chart objects to a particular style.

You can find the list of objects for each chart in individual Chart XML Sheet.

Better control over chart look and feel.
You can precisely define custom animations and effects according to your own taste.
Your formatting (cosmetic) attributes are grouped together in one element in the XML/JSON document, thereby separating data from visual formatting.
You can store the entire style definition in a central location in your application, so that all charts within application can utilize it.
Easy re-use of style definitions. Each style can be applied to multiple chart objects or vice versa.

Before we delve into more details, let us briefly skim over the different style type options that are present in FusionCharts XT.

Font	The Font style allows you to control text properties for all the text on the chart. Using this, you can set the font family, color, size, background color, border color, spacing etc. of individual text elements on the chart.
Animation	Animation style type allows you to define your custom animations for different elements of the chart. By default, FusionCharts XT animates the dataplot (columns, lines, area etc.) only. However, you can define your custom animations for other chart objects (like captions, titles, values etc.) in the XML/JSON. Each chart object can have multiple animation properties (like x, y, xscale, yscale, alpha etc.) and each sequence can have its own duration.
Shadow	To apply shadow effect to any object on the chart, use this style type with configurable properties.
Glow	Glow Style type lets you apply glow effects to objects on the chart
Bevel	To apply bevel effect for any of the chart objects, use this style type
Blur	Blur Style type helps to create a blur effect for any object on the chart. The amount and distance of blur are configurable.

Note: In JavaScript charts, customized animation, shadow, glow, bevel and blur style types are not available. JavaScript charts provide limited support for customized Font style.