How to Use Styles

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

How to Use Styles

To use the Styles feature in FusionCharts XT, you first need to define your styles in the XML/JSON data document.

To define styles, the following data is used:

XML
JSON

<chart>
<!-- Your data here -->
  <styles>

    <definition>
        <style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bold='1' bgColor='FFFFDD' />
        <style name='MyFirstAnimationStyle' type='animation' param='_xScale' start='0' duration='2' />
        <style name='MyFirstShadow' type='Shadow' color='CCCCCC' />
    </definition>

    <application>
        <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
        <apply toObject='Canvas' styles='MyFirstAnimationStyle' />
        <apply toObject='DataPlot' styles='MyFirstShadow' />
    </application>

  </styles>
</chart>

{
  "chart": {},
  "styles": {
    "definition": [
      {
        "name": "MyFirstFontStyle",
        "type": "font",
        "font": "Verdana",
        "size": "12",
        "color": "FF0000",
        "bold": "1",
        "bgcolor": "FFFFDD"
      },
      {
        "name": "MyFirstAnimationStyle",
        "type": "animation",
        "param": "_xScale",
        "start": "0",
        "duration": "2"
      },
      {
        "name": "MyFirstShadow",
        "type": "Shadow",
        "color": "CCCCCC"
      }
    ],
    "application": [
      {
        "toobject": "Caption",
        "styles": "MyFirstFontStyle,MyFirstShadow"
      },
      {
        "toobject": "Canvas",
        "styles": "MyFirstAnimationStyle"
      },
      {
        "toobject": "DataPlot",
        "styles": "MyFirstShadow"
      }
    ]
  }
}

As you can see above, all the style related elements and attributes appear under the <styles> parent element. It should effectively contain all your style related code. FusionCharts XT will not recognize any style definition outside the <styles> parent element.

Children to <styles> element are <definition> and <application> elements. As the name suggests, <definition> element contains your custom styles definition for the chart while under <application> element, you apply your custom defined styles to different chart objects.

Now, let us first get to the definition of styles.

Cruising back through the above XML/JSON code, you will see that we have defined three custom styles namely:

MyFirstFontStyle, which will later help us in setting font properties for text on the chart.
MyFirstAnimationStyle, which will help us in animating a chart object, and
MyFirstShadow that can render a shadow effect on any chart object.

Each style has to be defined using the <style> element. Multiple style elements may be placed one after another under <definition> element. So, if you wish to define five custom styles, you need to create five <style> elements.

Depending on the style type you are defining, each <style> element can have multiple attributes. In the above code example, each <style> element has its own set of properties. However, following two attributes are common to all:

name
type

Both the attributes are mandatory for each style definition.

Style Name

Name attribute lets you assign your custom name for the style definition. For example, in the above code, we have named the font style as MyFirstFontStyle, which could well have been JohnFirstStyle or GlobalFont or BigFont etc.

Format:

name='stylename'

Example:

XML
JSON

<style name='MyFirstFontStyle' type='font' face='Verdana'.../>
<style name='MyFirstAnimationStyle' type='animation' .../>
<style name='MyFirstShadow' type='Shadow' .../>

"definition":[{ "name":"MyFirstFontStyle", "type":"font", "face":"Verdana", ...},
              { "name":"MyFirstAnimationStyle", "type":"animation", ...},
              { "name":"MyFirstShadow", "type":"Shadow", ...}]

There are no restrictions on the style name, barring the pointers below:

Style name can only include alphabets and numbers. Punctuation marks (including underscore) should not be used.
Style name must be unique, that is, two style definitions cannot have the same name as there will be a conflict between the two.

Style Type

Each style needs to be defined as to what type it is. The type defines what this style is going to do. FusionCharts XT supports six style types:

Font
Animation
Shadow
Glow
Blur
Bevel

So, the type attribute expects one of the above six values as its parameter. In our example, we have defined the first style type as "font", second one as "animation" and third one as "shadow", which is self explanatory.

Format:

type='parameter' (must be either 'Font' or 'Animation' or 'Shadow' or 'Glow' or 'Blur' or 'Bevel')

Example:

XML
JSON

<style name='MyFirstFontStyle' type='font' face='Verdana' .../>
<style name='MyFirstAnimationStyle' type='animation' .../>
<style name='MyFirstShadow' type='Shadow' .../>

"definition":[{ "name":"MyFirstFontStyle", "type":"font", "face":"Verdana", ...},
              { "name":"MyFirstAnimationStyle", "type":"animation", ...},
              { "name":"MyFirstShadow", "type":"Shadow", ...}]

If you do not define a style type for a particular style, FusionCharts XT will ignore the style definition and log an error in the Debug Window.

The rest of the attributes for a style element are dependent on its Type. For example, we can use face, size, color, bold etc. property for a Font style type. However, the same is not valid for Animation style type, as these parameters make no sense for an animation. Each style type has therefore its own set of attributes which you can specify which will be discussed next.

Now, if you are already eager to apply the styles to chart objects, let us get to the application part of the story.

To apply your defined styles to chart objects, you first need to make sure that you have the list of chart objects present in each chart. This can be found here in the "Chart XML API" for each chart.

For example, we have the following chart objects for 2D Single Series Column Chart:

Object Name	Description	Features Supported	Animation Parameters Supported
BACKGROUND	BACKGROUND refers to the entire background of the chart.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
CANVAS	In 2D Charts, CANVAS refers to the area in which the actual chart is plotted. It is represented by a bounded rectangle. In 3D charts, it refers to the 3D base on which the columns are built.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
CAPTION	CAPTION refers to the heading of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
DATALABELS	DATALABELS refer to the x-axis labels of the data.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
DATAPLOT	DATAPLOT refers to the actual plot of the chart. For example, in Column 2D chart, columns are referred to as DATAPLOT. In Pie chart, it is the pie slices. In Bubble chart, it is the bubbles and so on.	Animation Shadow Glow Bevel Blur	_alpha _x _y _xScale _yScale
DATAVALUES	DATAVALUES refer to the plot values, that is, value of each data (line, column, bar, pie etc.), which is displayed beside the data plot.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
DIVLINES	DIVLINES are horizontal or vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire axis thus aiding the users in interpreting the chart.	Animation Shadow Glow Bevel Blur	_alpha _y _yScale
HGRID	HGRID refers to alternate color bands between two successive horizontal divisional lines.	Animation Shadow Glow Bevel Blur	_alpha _y _xScale _yScale
SUBCAPTION	SUBCAPTION refers to the sub-heading of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
TOOLTIP	TOOLTIP refers to the ToolTip shown when the mouse pointer is hovered over the dataplots.	Font
TRENDLINES	TRENDLINES refer to horizontal or vertical lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value.	Animation Shadow Glow Bevel Blur	_alpha _y _xScale _yScale
TRENDVALUES	TRENDVALUES refer to the display values of trend lines (if any).	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
VLINES	VLINES are vertical separator lines that help you separate blocks of data. These lines run through the height of the chart, thereby segregating data into different blocks. In case of bar charts, they are horizontal and run through the width of chart.	Animation Shadow Glow Bevel Blur	_alpha _x _y _yScale
XAXISNAME	XAXISNAME refers to the x-axis title of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
YAXISNAME	YAXISNAME refers to the y-axis title of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y
YAXISVALUES	YAXISVALUES refers to the limit values or divisional line values, which are displayed along the y-axis of the chart.	Animation Font Shadow Glow Bevel Blur	_alpha _x _y _rotation

Each chart has a different list of Objects. So, you need to ensure that you are working with the right Object name for the given chart.

Now, the following XML/JSON does the work of applying styles to different chart objects:

XML
JSON

<application>
   <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
   <apply toObject='Canvas' styles='MyFirstAnimationStyle' />
   <apply toObject='DataPlot' styles='MyFirstShadow' />
</application>

"application":[{ "toobject":"Caption", "styles":"MyFirstFontStyle,MyFirstShadow" },
               { "toobject":"Canvas", "styles":"MyFirstAnimationStyle" },
               { "toobject":"DataPlot", "styles":"MyFirstShadow" }]

Each <apply> element helps to apply multiple styles to one chart object for example, in our code, we first apply the MyFirstFontStyle font style to Caption of the chart and then apply the shadow style MyFirstShadow to the same object. To apply multiple styles, we separate the names of the respective styles by a comma.

Format:

You need to make sure of few things here:

To apply multiple styles to a chart object, you need to separate the style names using comma.

Example:

XML
JSON

<apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />

"application":[{ "toobject":"Caption", "styles":"MyFirstFontStyle,MyFirstShadow" }]

To apply a single style to multiple objects, you will need to define <apply> element for each object and then assign the style for it.

Example:

XML
JSON

<apply toObject='Caption' styles='MyFirstShadow' />
<apply toObject='DataPlot' styles='MyFirstShadow' />

"application":[{ "toobject":"Caption", "styles":"MyFirstShadow" },
               { "toobject":"DataPlot", "styles":"MyFirstShadow" }]

You cannot separate the object list by comma and then assign a single style to it - the following will be invalid:

XML
JSON

<apply toObject='Caption,DataPlot' styles='MyFirstShadow' />

"apply":[{ "toobject":"Caption","DataPlot", "styles":"MyFirstShadow" }]

The style name specified during application has been defined earlier in style definition and the spelling is correct, else, FusionCharts XT will ignore it and log the error in Debug Window.

And now that you are familiar with style definition and application, we move on to see the list of parameters supported by each style type. We start with Font style next.