FusionCharts for Flex > Creating Widgets > Spark Chart > Spark Column Chart > Configuration

In this section, we'll explain the process of configuring the various facets of the chart. We'll see how to:

Let's explain each of them in detail.

 
Specifying period blocks for the chart

FusionWidgets spark column chart allows to show period blocks on the chart using colored bands. This helps you easily interpret periods on the chart. For example, if you want to show 3 months period block on the chart, set:

<chart ... periodLength='3' periodColor='CCCCCC' periodAlpha='50'>

Here, we've set periodLength='3' as we've specified monthly data - so, 3 data points make 3 months. This will result in:

When specifying periods, make sure that your period length is always less than the number of data points that you've specified. This is because the period length is directly numbered on data points.
 
Configuring high/low column colors

You can configure the chart to color the highest and lowest values in the chart using separate colors. For this, set:

<chart ... highColor='00CC33' lowColor='CC0000' ...>

Here, we've notified the chart to color the column with highest in green and the one with lowest value in red. It will result in:

 
Adding trend-lines/zones

You can add trend-lines to spark column chart. If you want to show previous year's average revenue as a trend-line then add the following to XML:

<chart ...>
   ... data ....
   <trendlines>
      <line startvalue='215700' color='FF0000' thickness='1'/>
   </trendlines>
</chart>
This will result in:
 

If you want, the line may appear as dashed. For this set:

<line startvalue='215700' color='FF0000' thickness='1' dashed='1' dashLen='3' dashGap='3' alpha='100'/>

This will result in:

 

You can make slanted trend-lines. For this set:

<line startvalue='215700' endvalue='346400' color='FF0000' thickness='1'/>

This will result in:

 

You can also make the trend appear as a zone. For this set:

<line startvalue='215700' endvalue='396400' color='FF0000' thickness='1' isTrendZone='1'/>

This will result in: