Applying custom defined styles to chart objects

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 Sheet" for each chart. <<link>>

As a case example, we've the following chart objects for 2D Single Series Column Chart:

  • BACKGROUND
  • CANVAS
  • CAPTION
  • SUBCAPTION
  • YAXISNAME
  • XAXISNAME
  • DIVLINES
  • YAXISVALUES
  • HGRID
  • DATALABELS
  • DATAVALUES
  • TRENDLINES
  • TRENDVALUES
  • DATAPLOT
  • TOOLTIP
  • VLINES

Each of the above objects has been explained individually in the Chart Sheet, and as such we won't go into the details of chart object here. Also, each chart can have a different list of Objects. So, you need to ensure that you're working with the right Object name for the given chart.

The following XML does the work of applying styles to different chart objects:

 

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

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: <apply toObject='Object' styles='Style1, Style2, Style3 ...' />

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.
    e.g., <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
  • To apply a single style to multiple objects, you'll need to define <apply> element for each object and then assign the style for it.
    e.g.,
    <apply toObject='Caption' styles='MyFirstShadow' />
    <apply 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:
    <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 would ignore it and log the error in Debug Window.

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