Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Trend lines are customizable reference horizontal or vertical lines which aid in interpretation of data. They can be used to set context or define limits and targets. For example, while plotting quarterly sales of a company, you might want to use a trendline to depict the target sales.

In the FusionCharts Suite XT context, trendlines do not show trends for data points. They are only used to add context to data. For showing trends in data, use regression lines.

This section talks about:

Adding tool-text to a trend line

FusionCharts Suite XT allows you to specify custom tool-text which will be rendered when the mouse pointer is hovered over the trend line.

A column 2D chart with a defined tool-text for trend line looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "startvalue": "175000", "color": "#1aaf5d", "valueOnRight": "1", "tooltext": "Quarterly sales target was $startDataValue", "displayvalue": "Target - $175K" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "175000",
                    "color": "#1aaf5d",
                    "valueOnRight": "1",
                    "tooltext": "Quarterly sales target was $startDataValue",
                    "displayvalue": "Target - $175K"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "175000",
                "color": "#1aaf5d",
                "valueOnRight": "1",
                "tooltext": "Quarterly sales target was $startDataValue",
                "displayvalue": "Target - $175K"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to add tool-text:

Attribute Description

toolText

It specifies the text that will be displayed when mouse is hovered over the trend line.

Adding trend zones

Trend zones are similar to trend lines except that they mark out an entire zone rather than just a line. A column 2D chart with a trend zone looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "isTrendZone": "1", "startvalue": "175000", "endValue": "150000", "color": "#1aaf5d", "valueOnRight": "1", "alpha": "30", "tooltext": "Quarterly sales target range was $endDataValue to $startDataValue", "displayvalue": "Target Range" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "isTrendZone": "1",
                    "startvalue": "175000",
                    "endValue": "150000",
                    "color": "#1aaf5d",
                    "valueOnRight": "1",
                    "alpha": "30",
                    "tooltext": "Quarterly sales target range was $endDataValue to $startDataValue",
                    "displayvalue": "Target Range"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "isTrendZone": "1",
                "startvalue": "175000",
                "endValue": "150000",
                "color": "#1aaf5d",
                "valueOnRight": "1",
                "alpha": "30",
                "tooltext": "Quarterly sales target range was $endDataValue to $startDataValue",
                "displayvalue": "Target Range"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to render a trend zone:

Attribute Description

isTrendZone

Set this to 1 to render a trend zone on the chart and 0 to hide it.

startValue

It specifies the starting point data-value for the trend-zone.

endValue

It specifies the ending point data-value for the trend zone.

If the endValue attribute is included in the code and IsTrendZone is set to 0, the trend-line is rendered as a slanted line, starting at the startValue on the primary y-axis and ending at endValue on the secondary y-axis (this could be an imaginative secondary y-axis).

Customizing trend lines and trend zones

A column 2D chart with the trend line customized looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "startvalue": "175000", "color": "#8cbb2c", "thickness": "4", "alpha": "60", "displayvalue": "Target - $175K" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "175000",
                    "color": "#8cbb2c",
                    "thickness": "4",
                    "alpha": "60",
                    "displayvalue": "Target - $175K"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "175000",
                "color": "#8cbb2c",
                "thickness": "4",
                "alpha": "60",
                "displayvalue": "Target - $175K"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to customize trend lines and trend zones:

Attribute Description

color

It specifies the hex code for the color that will be used to render the trend-line/zone e.g. #00ffaa.

thickness

It specifies the thickness for the trend-line(in pixels). You cannot specify the thickness for a trend zone.

alpha

Sets the transparency of trend line/zone. Can take values from 0 (transparent) to 100 (opaque).

A column 2D chart with the trend zone customized looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "isTrendZone": "1", "startvalue": "175000", "endValue": "150000", "color": "#8cbb2c", "alpha": "60", "valueOnRight": "1", "tooltext": "Quarterly sales target was $endDataValue to $startDataValue", "displayvalue": "Target" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "isTrendZone": "1",
                    "startvalue": "175000",
                    "endValue": "150000",
                    "color": "#8cbb2c",
                    "alpha": "60",
                    "valueOnRight": "1",
                    "tooltext": "Quarterly sales target was $endDataValue to $startDataValue",
                    "displayvalue": "Target"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "isTrendZone": "1",
                "startvalue": "175000",
                "endValue": "150000",
                "color": "#8cbb2c",
                "alpha": "60",
                "valueOnRight": "1",
                "tooltext": "Quarterly sales target was $endDataValue to $startDataValue",
                "displayvalue": "Target"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Customizing the trend-line display value text

Starting v3.8.0, FusionCharts allows you to also customize the display value text rendered with trend-lines.

A column chart with the trend-line’s display value text customized looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Monthly revenue for the last year", "subCaption": "Harry's SuperMart", "xAxisName": "Month", "yAxisName": "Revenue", "numberPrefix": "$", "theme": "fint", "trendValueFontBold": "1", "trendValueBorderColor": "#123456", "trendValueBorderDashed": "1", "trendValueBorderDashlen": "2", "trendValueBorderDashGap": "3", "trendValueBorderThickness": "3" }, "data": [ { "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" } ], "trendlines": [ { "line": [ { "startvalue": "700000", "color": "#1aaf5d", "valueOnRight": "1", "displayvalue": "Monthly Target" } ] } ] }
{
    "chart": {
        "caption": "Monthly revenue for the last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenue",
        "numberPrefix": "$",
        "theme": "fint",
        "trendValueFontBold": "1",
        "trendValueBorderColor": "#123456",
        "trendValueBorderDashed": "1",
        "trendValueBorderDashlen": "2",
        "trendValueBorderDashGap": "3",
        "trendValueBorderThickness": "3"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "700000",
                    "color": "#1aaf5d",
                    "valueOnRight": "1",
                    "displayvalue": "Monthly Target"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '550',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue for the last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenue",
            "numberPrefix": "$",
            "theme": "fint",
            "trendValueFontBold": "1",
            "trendValueBorderColor": "#123456",
            "trendValueBorderDashed": "1",
            "trendValueBorderDashlen": "2",
            "trendValueBorderDashGap": "3",
            "trendValueBorderThickness": "3"
        },
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "700000",
                "color": "#1aaf5d",
                "valueOnRight": "1",
                "displayvalue": "Monthly Target"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to customize the trend-line display value text:

Attribute Description

trendValueFont

Sets the font family for the trend-line display value.

trendValueFontSize

Sets the font size for the trend-line display value.

trendValueFontBold

Sets whether the trend-line display value will be bold formatted. Setting this attribute to 1 will bold format the text, setting it to 0 (default) will not.

trendValueFontItalic

Sets whether the trend-line display value will be italicized. Setting this attribute to 1 will italicize the text, setting it to 0 (default) will not.

trendValueAlpha

Sets the transparency for the trend-line display value. This attribute takes values between 0 (transparent) and 100 (opaque; default).

trendValueBgColor

Sets the hex color code for the background of the trend-line display value.

trendValueBgAlpha

Sets the transparency for the background of the trend-line display value. This attribute takes values between 0 (transparent) and 100 (opaque; default).

trendValueBorderColor

Sets the hex color code for the border around the trend-line display value.

trendValueBorderAlpha

Sets the transparency for the border around the trend-line display value. This attribute takes values between 0 (transparent) and 100 (opaque; default).

trendValueBorderPadding

Sets padding for the border around the trend-line display value.

trendValueBorderRadius

Sets the radius for the border around the trend-line display value.

trendValueBorderThickness

Sets the thickness for the border around the trend-line display value.

trendValueBorderDashed

Sets whether the border around the trend-line display value will be drawn as a dashed line. Setting this attribute to 1 will draw the border as a dashed line, setting it to 0 (default) will draw it as a straight line.

trendValueBorderDashLen

Sets the length of each dash, if the border around the trend-line display value is drawn as a dashed line.

trendValueBorderDashGap

Sets the gap between each dash, if the border around the trend-line display value is drawn as a dashed line.

Adding dashed trend lines

A column 2D chart with a dashed trendline looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "startvalue": "175000", "color": "#1aaf5d", "displayvalue": "Target - $175K", "dashed": "1", "dashLen": "4", "dashGap": "2" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "175000",
                    "color": "#1aaf5d",
                    "displayvalue": "Target - $175K",
                    "dashed": "1",
                    "dashLen": "4",
                    "dashGap": "2"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "175000",
                "color": "#1aaf5d",
                "displayvalue": "Target - $175K",
                "dashed": "1",
                "dashLen": "4",
                "dashGap": "2"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to render a dashed trendline instead of the continuous line:

Attribute Description

dashed

Set this to 1 to make trend lines dashed or 0 (default) to make them normal.

dashLen

Sets the length of each dash of a trend line(in pixels).

dashGap

Sets the gap between two consecutive dashes in trend lines (in pixels).

Adding slanted trendlines

A line chart with a slanted trend line is as shown below:

FusionCharts will load here..
{ "chart": { "caption": "Website Visitors", "subCaption": "Last week", "xAxisName": "Day", "yAxisName": "Visitors", "anchorRadius": "5", "showValues": "0", "theme": "fint" }, "data": [ { "label": "Mon", "value": "5123" }, { "label": "Tue", "value": "4233" }, { "label": "Wed", "value": "5507" }, { "label": "Thu", "value": "4110" }, { "label": "Fri", "value": "5529" }, { "label": "Sat", "value": "5803" }, { "label": "Sun", "value": "6202" } ], "trendlines": [ { "line": [ { "startvalue": "4400", "endValue": "6000", "color": "#1aaf5d", "valueOnRight": "1", "dashed": "1", "displayvalue": "Trend" } ] } ] }
{
    "chart": {
        "caption": "Website Visitors",
        "subCaption": "Last week",
        "xAxisName": "Day",
        "yAxisName": "Visitors",
        "anchorRadius": "5",
        "showValues": "0",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Mon",
            "value": "5123"
        },
        {
            "label": "Tue",
            "value": "4233"
        },
        {
            "label": "Wed",
            "value": "5507"
        },
        {
            "label": "Thu",
            "value": "4110"
        },
        {
            "label": "Fri",
            "value": "5529"
        },
        {
            "label": "Sat",
            "value": "5803"
        },
        {
            "label": "Sun",
            "value": "6202"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "4400",
                    "endValue": "6000",
                    "color": "#1aaf5d",
                    "valueOnRight": "1",
                    "dashed": "1",
                    "displayvalue": "Trend"
                }
            ]
        }
    ]
}
<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: 'line',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Website Visitors",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Visitors",
            "anchorRadius": "5",
            "showValues": "0",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Mon",
            "value": "5123"
        }, {
            "label": "Tue",
            "value": "4233"
        }, {
            "label": "Wed",
            "value": "5507"
        }, {
            "label": "Thu",
            "value": "4110"
        }, {
            "label": "Fri",
            "value": "5529"
        }, {
            "label": "Sat",
            "value": "5803"
        }, {
            "label": "Sun",
            "value": "6202"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "4400",
                "endValue": "6000",
                "color": "#1aaf5d",
                "valueOnRight": "1",
                "dashed": "1",
                "displayvalue": "Trend"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to render a slanted trend line:

Attribute Description

startValue

It specifies the starting point data-value for the slanted trend line. This data value is plotted on the y-axis on the left.

endValue

It specifies the ending point data-value for the slanted trend line. This data value is plotted on the imaginary y-axis on the right.

Configuring the trend line label

FusionCharts Suite XT allows you to show the trendline label to the right of the chart canvas. A column 2D chart with the trendline label rendered on the right looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Sales Summary", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberprefix": "$", "theme": "fint" }, "data": [ { "label": "Q1", "value": "195000" }, { "label": "Q2", "value": "155000" }, { "label": "Q3", "value": "178000" }, { "label": "Q4", "value": "192000" } ], "trendlines": [ { "line": [ { "startvalue": "175000", "color": "#1aaf5d", "displayvalue": "Target - $175K", "dashed": "1", "dashLen": "4", "dashGap": "2", "valueOnRight": "1" } ] } ] }
{
    "chart": {
        "caption": "Quarterly Sales Summary",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "195000"
        },
        {
            "label": "Q2",
            "value": "155000"
        },
        {
            "label": "Q3",
            "value": "178000"
        },
        {
            "label": "Q4",
            "value": "192000"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "175000",
                    "color": "#1aaf5d",
                    "displayvalue": "Target - $175K",
                    "dashed": "1",
                    "dashLen": "4",
                    "dashGap": "2",
                    "valueOnRight": "1"
                }
            ]
        }
    ]
}
<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: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Sales Summary",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "195000"
        }, {
            "label": "Q2",
            "value": "155000"
        }, {
            "label": "Q3",
            "value": "178000"
        }, {
            "label": "Q4",
            "value": "192000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "175000",
                "color": "#1aaf5d",
                "displayvalue": "Target - $175K",
                "dashed": "1",
                "dashLen": "4",
                "dashGap": "2",
                "valueOnRight": "1"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to render the trend line label on the right:

Attribute

Description

valueOnRight

If set to 1, it renders the trend-line label on the right or 0(default) to render on the left.

Adding trendlines for a dual y-axis chart

A dual y-axis chart has 2 y-axes. So when you are defining a trendline, you also need to define which axis the line has to be defined on.

This can be done using the parentYAxis attribute of the line object.

By default, the trend-line shows up on the primary y-axis but if you want to show it on the secondary y-axis you have to configure the same by setting parentYAxis equal to S.

Top