FusionCharts Suite XT allows you to customize several cosmetic and functional properties for the spark column chart.
In this section, you will be shown how you can:
Configure period blocks
Configure the high and low columns
Add trend-lines/trend-zones
Configure hover effects
Configuring Period Blocks for the Chart
You can show period blocks on the chart using colored bands. This helps you easily interpret periods on the chart.
A spark column chart rendered with a period block of three months looks like this:
Given below is a brief description of the attributes used to configure a period block:
| Attribute Name | Description |
|---|---|
periodLength |
It is used to specify the number of data points that a period block will encapsulate. For our example, we will set this value to 3. |
periodColor |
It is used to specify the hex code of the color that will be used to render the period block, e.g. #555555. |
periodAlpha |
It is used to specify the transparency of the period block. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 60. |
The data structure needed to configure a period block is given below:
Configuring the High and Low Columns
By default, the spark column chart highlights, using a default color, the highest and lowest data plots and also shows their value. You can, however, configure the colors for the highest and lowest columns based on your requirement.
A spark column chart with the color of the high and low columns configured looks like this:
Given below is a brief description of the attributes used to configure the high and low columns:
| Attribute Name | Description |
|---|---|
highColor |
It is used to specify the hex code for the fill color for the column having the highest value, e.g. #D3CEBA |
lowColor |
It is used to specify the hex code for the fill color for the column having the lowest value, e.g. #2222AA. |
The data structure needed to configure the colors for the high and low columns is given below:
Adding Trend-lines/Trend-zones
Adding Trend-lines
A spark column chart rendered with a trend-line looks like this:
Given below is a brief description of the attributes used to render a trend-line:
| Attribute Name | Description |
|---|---|
startvalue |
It is used to specify the starting value for the trend-line. For example, if you want to plot a slanted trend-line from value 102 to 109, the starting value will be 102. |
endValue |
It is used to specify the ending value for the trend-line. For example, if you want to plot a slanted trend-line from value 102 to 109, the ending value will be 109. |
The data structure needed to render a trend-line is given below:
Customizing Trend-lines
A spark column chart with the cosmetic properties of trend-lines configured looks like this:
Given below is a brief description of the attributes used to configure trend-line cosmetics:
| Attribute Name | Description |
|---|---|
color |
It is used to specify the hex code of the color that will be used to render the trend-line and its associated text, e.g. #AB3456. |
thickness |
It is used to specify the thickness of the trend-line, e.g. 5. |
dashed |
It is used to specify whether the trend-line will be rendered as a dashed line. Setting this attribute to 1 will render the trend-line as a dashed line, setting it to 0 (default) will render it as a whole line. |
dashLen |
It is used to specify the length of each dash, if the trend-line is rendered as a dashed line, e.g. 5. |
dashGap |
It is used to specify the gap between each dash, if the trend-line is rendered as a dashed line, e, g. 2. |
alpha |
It is used to specify the transparency of the trend-line. this attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
The data structure needed to customize a trend-line is given below:
Adding Trend-zones
A spark column chart rendered with a trend-zone looks like this:
Given below is a brief description of the attributes used to render a trend-zone:
| Attribute Name | Description |
|---|---|
isTrendZone |
It is used to specify whether the chart will be rendered with a trend-zone. Setting this attribute to 1 will render a trend-zone, setting it to 0 (default) will render a trend-line. |
startvalue |
It is used to specify the starting value for the trend-zone. For example, if you want to plot a trend-zone from value 102 to 109, the starting value will be 102. |
endValue |
It is used to specify the ending value for the trend-zone. For example, if you want to plot a trend-zone from value 102 to 109, the ending value will be 109. |
color |
It is used to specify the hex code of the color that will be used to render the trend-zone and its associated text, e.g. #543ACD. |
The data structure needed to render a trend-zone is given below:
Configuring Hover Effects for the Chart
Starting FusionCharts Suite XT v3.4, you can use hover effects to improve the visual representation of your gauge.
A spark columnchart configured to enable hover effects looks like this:
Given below is a brief description of the attributes used to configure the hover effect:
| Attribute Name | Description |
|---|---|
highHoverColor |
It is used to specify the hex code of the fill color of the highest value column when the mouse pointer is hovered over it, e.g. #b0fdb0. |
lowHoverColor |
It is used to specify the hex code of the fill color of the lowest value column when the mouse pointer is hovered over it, e.g. #b0fdb0. |
The data structure needed to configure hover effects is given below:
There! You have now seen how you can configure the functional and cosmetic properties of a spark column chart.