FusionCharts for Flex > Creating Widgets > Spark Charts > Spark Line > 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 line chart allows to show period blocks on the chart using colored bands. This helps you easily interpret periods on the chart. For example, if we want to show 3 months period block on the chart, set:

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

Here, we've set periodLength='12' as we've specified the weekly data. So, 12 data points (i.e., 12 weeks will make 3 months). This will result in:

Similarly, if you want to highlight 2 months block instead of 3, set:

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

This will result in:

While 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 open, close, high/low points, values and anchors

By default, the spark line chart highlights the open, close, high & low points and also displays their value. You can configure the chart to:

  • Change color of open, close, high, low points
  • Opt whether to highlight each one using anchors
  • Whether to show values for each one of them

To change the color of open, close, high or low points, you need to set:

<chart ... openColor='0099FF' closeColor='0099FF' highColor='00CC33' lowColor='FF0000' ...>

Here, we've colored open and low anchors in blue, high in green and low in red. Now when you run the code, an image similar to the one shown below is displayed:

 

If you do not want to highlight any of these anchors, set:

<chart ... showOpenAnchor='0' showCloseAnchor='0' showHighAnchor='1' showLowAnchor='1' ...>

When you run the code, an image similar to the one shown below is displayed. The image shown below displays the high and low anchors, but not open and close anchors.

 

Additionally, you can select the values to display. For this, set:

<chart ... showOpenValue='1' showCloseValue='1' showHighLowValue='0' ...>

When you run the code, an image similar to the one shown below is displayed. The image shown below displays the opening and closing values, but not high/low value.

 
Configuring line & anchor properties

To configure the line properties, set:

<chart ... lineColor='996600' thickness='2' lineAlpha='60' ...>

This will result in:

 

You can also configure to show all the anchor points and then set their properties. For this, set:

<chart ... drawAnchors='1' anchorSides='4' anchorRadius='4' anchorColor='666666' anchorAlpha='80' ...>

This will result in:

 
Showing only points but no lines

To display only points in the chart, but no lines, set:

<chart animation='0' ... lineAlpha='0' drawAnchors='1' anchorSides='4' anchorRadius='4' anchorColor='666666' anchorAlpha='80' ... >

Here, we've hidden the line by setting lineAlpha='0'. Also, we've set animation='0' to remove the delay in rendering of anchors. This will result in:

 
Adding trend-lines/zones

You can add trend-lines to spark line chart as shown below. For example, if we wanted to show previous day's closing figure as a trend-line, we need to add the following to XML:

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

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

<line startvalue='32' 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='29' endValue='35' color='FF0000' thickness='1' />

This will result in:

 

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

<line startvalue='29' endValue='35' color='FF0000' thickness='1' isTrendZone='1'/>

This will result in: