FusionCharts XT Styles

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".

Close

		  

      
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. 

      
Advantages of using Style

    		
  

  
 
    
    
        
  • 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.
    • 
      

  

  
  
 
    
Style Types

    
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.