FusionCharts for Flex > Styles XML API > Style Types

FusionCharts introduces 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.

To use Styles, you need to:

  • Define your own style attributes.
  • Associate (i.e., apply) the style attributes with defined Objects of the chart.

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.

 

Advantages of using Style:

  • Better control over chart look & 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 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.
 

Style Types

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

Font

The Font style allows you to control text properties for all the text on the chart. Using this, you can set the font-face, 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 animates the data plot (columns, lines, area, etc.) only. However, you can define your custom animations for other chart objects (like captions, titles, values, etc.) in the XML. Each chart object can have multiple animation properties (like x, y, xscale, yscale, alpha, etc.) and each sequence can have its own duration

Shadow

The Shadow style allows you to apply shadow effect along with configurable properties to any object on the chart.

Glow

The Glow style type lets you apply glow effects to objects on the chart.

Bevel

The Bevel style allows you to apply bevel effect for any of the chart objects.

Blur

The Blur Style type helps to create a blur effect for any object on the chart. The amount and distance of blur are configurable.