Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

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:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30", "periodlength": "3", "periodcolor": "#cccccc", "periodalpha": "50" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30",
        "periodlength": "3",
        "periodcolor": "#cccccc",
        "periodalpha": "50"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue by Month",
            "subcaption": "Last year",
            "subCaptionFontSize": "11",
            "numberPrefix": "$",
            "highColor": "#6baa01",
            "lowColor": "#e44a00",
            "chartBottomMargin": "30",
            "periodlength": "3",
            "periodcolor": "#cccccc",
            "periodalpha": "50"
        },
        "dataset": [{
            "data": [{
                "value": "783000"
            }, {
                "value": "601000"
            }, {
                "value": "515000"
            }, {
                "value": "315900"
            }, {
                "value": "388000"
            }, {
                "value": "433000"
            }, {
                "value": "910000"
            }, {
                "value": "798000"
            }, {
                "value": "483300"
            }, {
                "value": "562000"
            }, {
                "value": "359400"
            }, {
                "value": "485000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue by Month",
            "subcaption": "Last year",
            "subCaptionFontSize": "11",
            "numberPrefix": "$",
            //Configuring highest value plot color
            "highColor": "#6baa01",
            //Configuring lowest value plot color
            "lowColor": "#e44a00",
            "chartBottomMargin": "30"
        },
        "dataset": [{
            "data": [{
                "value": "783000"
            }, {
                "value": "601000"
            }, {
                "value": "515000"
            }, {
                "value": "315900"
            }, {
                "value": "388000"
            }, {
                "value": "433000"
            }, {
                "value": "910000"
            }, {
                "value": "798000"
            }, {
                "value": "483300"
            }, {
                "value": "562000"
            }, {
                "value": "359400"
            }, {
                "value": "485000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Adding Trend-lines/Trend-zones

Adding Trend-lines

A spark column chart rendered with a trend-line looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ], "trendlines": [ { "line": [ { "startvalue": "550000", "endValue": "700000" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "550000",
                    "endValue": "700000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue by Month",
            "subcaption": "Last year",
            "subCaptionFontSize": "11",
            "numberPrefix": "$",
            "highColor": "#6baa01",
            "lowColor": "#e44a00",
            "chartBottomMargin": "30"
        },
        "dataset": [{
            "data": [{
                "value": "783000"
            }, {
                "value": "601000"
            }, {
                "value": "515000"
            }, {
                "value": "315900"
            }, {
                "value": "388000"
            }, {
                "value": "433000"
            }, {
                "value": "910000"
            }, {
                "value": "798000"
            }, {
                "value": "483300"
            }, {
                "value": "562000"
            }, {
                "value": "359400"
            }, {
                "value": "485000"
            }]
        }],
        //Adding trendlines in chart
        "trendlines": [{
            "line": [{
                "startvalue": "550000",
                "endValue": "700000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Customizing Trend-lines

A spark column chart with the cosmetic properties of trend-lines configured looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ], "trendlines": [ { "line": [ { "startvalue": "550000", "endValue": "700000", "color": "#ff0000", "thickness": "1", "dashed": "1", "dashedlen": "3", "dashgap": "3", "alpha": "100" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "550000",
                    "endValue": "700000",
                    "color": "#ff0000",
                    "thickness": "1",
                    "dashed": "1",
                    "dashedlen": "3",
                    "dashgap": "3",
                    "alpha": "100"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue by Month",
            "subcaption": "Last year",
            "subCaptionFontSize": "11",
            "numberPrefix": "$",
            "highColor": "#6baa01",
            "lowColor": "#e44a00",
            "chartBottomMargin": "30"
        },
        "dataset": [{
            "data": [{
                "value": "783000"
            }, {
                "value": "601000"
            }, {
                "value": "515000"
            }, {
                "value": "315900"
            }, {
                "value": "388000"
            }, {
                "value": "433000"
            }, {
                "value": "910000"
            }, {
                "value": "798000"
            }, {
                "value": "483300"
            }, {
                "value": "562000"
            }, {
                "value": "359400"
            }, {
                "value": "485000"
            }]
        }],
        //Adding trendlines in chart
        "trendlines": [{
            "line": [{
                "startvalue": "550000",
                "endValue": "700000",
                //Trendline related cosmetics
                "color": "#ff0000",
                "thickness": "1",
                "dashed": "1",
                "dashedlen": "3",
                "dashgap": "3",
                "alpha": "100"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Adding Trend-zones

A spark column chart rendered with a trend-zone looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ], "trendlines": [ { "line": [ { "startValue": "450000", "endValue": "650000", "isTrendZone": "1", "color": "#ff0000" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startValue": "450000",
                    "endValue": "650000",
                    "isTrendZone": "1",
                    "color": "#ff0000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue by Month",
            "subcaption": "Last year",
            "subCaptionFontSize": "11",
            "numberPrefix": "$",
            "highColor": "#6baa01",
            "lowColor": "#e44a00",
            "chartBottomMargin": "30"
        },
        "dataset": [{
            "data": [{
                "value": "783000"
            }, {
                "value": "601000"
            }, {
                "value": "515000"
            }, {
                "value": "315900"
            }, {
                "value": "388000"
            }, {
                "value": "433000"
            }, {
                "value": "910000"
            }, {
                "value": "798000"
            }, {
                "value": "483300"
            }, {
                "value": "562000"
            }, {
                "value": "359400"
            }, {
                "value": "485000"
            }]
        }],
        //Adding trend-zone in chart
        "trendlines": [{
            "line": [{
                "startValue": "450000",
                "endValue": "650000",
                "isTrendZone": "1",
                "color": "#ff0000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Configuring Hover Effects for the Chart

You can use hover effects to improve the visual representation of your gauge.

A spark columnchart configured to enable hover effects looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30", "highHoverColor": "#b0fdb0", "lowHoverColor": "#fcb0b0" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30",
        "highHoverColor": "#b0fdb0",
        "lowHoverColor": "#fcb0b0"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue by Month",
            "subcaption": "Last year",
            "subCaptionFontSize": "11",
            "numberPrefix": "$",
            "highColor": "#6baa01",
            "lowColor": "#e44a00",
            "chartBottomMargin": "30",
            //Configuring Hover color for high and low anchors
            "highHoverColor": "#b0fdb0",
            "lowHoverColor": "#fcb0b0"
        },
        "dataset": [{
            "data": [{
                "value": "783000"
            }, {
                "value": "601000"
            }, {
                "value": "515000"
            }, {
                "value": "315900"
            }, {
                "value": "388000"
            }, {
                "value": "433000"
            }, {
                "value": "910000"
            }, {
                "value": "798000"
            }, {
                "value": "483300"
            }, {
                "value": "562000"
            }, {
                "value": "359400"
            }, {
                "value": "485000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Top