Cruising back through the above XML/JSON code, you'll see that we've 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:

1. name
2. type

Both the attributes are mandatory for each style definition.

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:

Example:

Each style needs to be defined as to what type it is. The type defines what this style is going to do. FusionWidgets 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've defined the first style type as "font", second one as "animation" and third one as "shadow", which is self explanatory.

Format:

Example:

To apply your defined Styles to chart objects, you first need to make sure that you've the list of chart objects present in each chart. This can be found here in the Chart Objects section of the XML Sheet for each chart.

For example, we've the following chart objects for Angular Gauge:

Each <apply> element helps to apply multiple styles to one chart object e.g., 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'll need to define the <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, FusionWidgets XT will ignore it and log the error in Debug Window.

You can also apply custom defined Styles to annotation objects. Whenever you have to apply Styles to annotations, you have to make an annotation group, put the annotations in the annotation group and then just name the ID in the toObject attribute of the <apply> element.

For a detailed discussion (with example) on how to apply Styles to annotations, please have a look at the Using Styles page of the Annotations section.