Scroll Chart

These chart types belong to FusionCharts XT.

Scroll charts are used to avoid cluttering of plots, thereby providing a clean look. Scroll charts can show a larger number of data plots in a small space.

The types of scroll charts available in the FusionCharts Suite XT are :

  • Scroll Column 2D Chart

  • Scroll Line 2D Chart

  • Scroll Area 2D Chart

  • Scroll Stacked Column 2D Chart

  • Scroll Combination 2D Chart (Single Y)

  • Scroll Combination 2D Chart (Dual Y)

Scroll Column 2D Chart

Let's create a scroll column 2D chart to plot the sales trends for FY 2012 - FY 2013.

To create a scroll column 2D chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a scroll column 2D chart, set scrollcolumn2d.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of scroll column 2D chart.

The scroll column 2D chart for the above code looks like:

FusionCharts will load here..
{ "chart": { "theme": "fusion", "caption": "Sales Trends", "subcaption": "2016 - 2017", "xaxisname": "Month", "yaxisname": "Revenue", "showvalues": "1", "numberprefix": "$", "numVisiblePlot": "12", "scrollheight": "10", "flatScrollBars": "1", "scrollShowButtons": "0", "scrollColor": "#cccccc", "showHoverEffect": "1" }, "categories": [ { "category": [ { "label": "Jan 2016" }, { "label": "Feb 2016" }, { "label": "Mar 2016" }, { "label": "Apr 2016" }, { "label": "May 2016" }, { "label": "Jun 2016" }, { "label": "Jul 2016" }, { "label": "Aug 2016" }, { "label": "Sep 2016" }, { "label": "Oct 2016" }, { "label": "Nov 2016" }, { "label": "Dec 2016" }, { "label": "Jan 2017" }, { "label": "Feb 2017" }, { "label": "Mar 2017" }, { "label": "Apr 2017" }, { "label": "May 2017" }, { "label": "Jun 2017" }, { "label": "Jul 2017" }, { "label": "Aug 2017" }, { "label": "Sep 2017" }, { "label": "Oct 2017" }, { "label": "Nov 2017" }, { "label": "Dec 2017" } ] } ], "dataset": [ { "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "26300" }, { "value": "31800" }, { "value": "30900" }, { "value": "33000" }, { "value": "36200" }, { "value": "32100" }, { "value": "37500" }, { "value": "38500" }, { "value": "35400" }, { "value": "38200" }, { "value": "33300" }, { "value": "38300" } ] } ] }
{
    "chart": {
        "theme": "fusion",
        "caption": "Sales Trends",
        "subcaption": "2016 - 2017",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "showvalues": "1",
        "numberprefix": "$",
        "numVisiblePlot": "12",
        "scrollheight": "10",
        "flatScrollBars": "1",
        "scrollShowButtons": "0",
        "scrollColor": "#cccccc",
        "showHoverEffect": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "26300"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "30900"
                },
                {
                    "value": "33000"
                },
                {
                    "value": "36200"
                },
                {
                    "value": "32100"
                },
                {
                    "value": "37500"
                },
                {
                    "value": "38500"
                },
                {
                    "value": "35400"
                },
                {
                    "value": "38200"
                },
                {
                    "value": "33300"
                },
                {
                    "value": "38300"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'scrollColumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Sales Trends",
            "subcaption": "2016 - 2017",
            "xaxisname": "Month",
            "yaxisname": "Revenue",
            "showvalues": "1",
            "numberprefix": "$",
            "numVisiblePlot": "12",
            "scrollheight": "10",
            "flatScrollBars": "1",
            "scrollShowButtons": "0",
            "scrollColor": "#cccccc",
            "showHoverEffect": "1"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2016"
            }, {
                "label": "Feb 2016"
            }, {
                "label": "Mar 2016"
            }, {
                "label": "Apr 2016"
            }, {
                "label": "May 2016"
            }, {
                "label": "Jun 2016"
            }, {
                "label": "Jul 2016"
            }, {
                "label": "Aug 2016"
            }, {
                "label": "Sep 2016"
            }, {
                "label": "Oct 2016"
            }, {
                "label": "Nov 2016"
            }, {
                "label": "Dec 2016"
            }, {
                "label": "Jan 2017"
            }, {
                "label": "Feb 2017"
            }, {
                "label": "Mar 2017"
            }, {
                "label": "Apr 2017"
            }, {
                "label": "May 2017"
            }, {
                "label": "Jun 2017"
            }, {
                "label": "Jul 2017"
            }, {
                "label": "Aug 2017"
            }, {
                "label": "Sep 2017"
            }, {
                "label": "Oct 2017"
            }, {
                "label": "Nov 2017"
            }, {
                "label": "Dec 2017"
            }]
        }],
        "dataset": [{
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "26300"
            }, {
                "value": "31800"
            }, {
                "value": "30900"
            }, {
                "value": "33000"
            }, {
                "value": "36200"
            }, {
                "value": "32100"
            }, {
                "value": "37500"
            }, {
                "value": "38500"
            }, {
                "value": "35400"
            }, {
                "value": "38200"
            }, {
                "value": "33300"
            }, {
                "value": "38300"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the scroll column 2D chart.

Scroll Line 2D Chart

Now, let's create a scroll line 2D chart. To render a scroll line chart in 2D, change the value of the type attribute from scrollColumn2d to scrollline2d. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of scroll line 2D chart.

A single-series scroll line 2D chart looks like:

FusionCharts will load here..
{ "chart": { "theme": "fusion", "caption": "Sales Trends", "subCaption": "(2016 to 2017)", "xAxisName": "Month", "yAxisName": "Revenue", "numberPrefix": "$", "lineThickness": "3", "flatScrollBars": "1", "scrollheight": "10", "numVisiblePlot": "12", "showHoverEffect": "1" }, "categories": [ { "category": [ { "label": "Jan 2016" }, { "label": "Feb 2016" }, { "label": "Mar 2016" }, { "label": "Apr 2016" }, { "label": "May 2016" }, { "label": "Jun 2016" }, { "label": "Jul 2016" }, { "label": "Aug 2016" }, { "label": "Sep 2016" }, { "label": "Oct 2016" }, { "label": "Nov 2016" }, { "label": "Dec 2016" }, { "label": "Jan 2017" }, { "label": "Feb 2017" }, { "label": "Mar 2017" }, { "label": "Apr 2017" }, { "label": "May 2017" }, { "label": "Jun 2017" }, { "label": "Jul 2017" }, { "label": "Aug 2017" }, { "label": "Sep 2017" }, { "label": "Oct 2017" }, { "label": "Nov 2017" }, { "label": "Dec 2017" } ] } ], "dataset": [ { "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "26300" }, { "value": "31800" }, { "value": "30900" }, { "value": "33000" }, { "value": "36200" }, { "value": "32100" }, { "value": "37500" }, { "value": "38500" }, { "value": "35400" }, { "value": "38200" }, { "value": "33300" }, { "value": "38300" } ] } ] }
{
    "chart": {
        "theme": "fusion",
        "caption": "Sales Trends",
        "subCaption": "(2016 to 2017)",
        "xAxisName": "Month",
        "yAxisName": "Revenue",
        "numberPrefix": "$",
        "lineThickness": "3",
        "flatScrollBars": "1",
        "scrollheight": "10",
        "numVisiblePlot": "12",
        "showHoverEffect": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "26300"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "30900"
                },
                {
                    "value": "33000"
                },
                {
                    "value": "36200"
                },
                {
                    "value": "32100"
                },
                {
                    "value": "37500"
                },
                {
                    "value": "38500"
                },
                {
                    "value": "35400"
                },
                {
                    "value": "38200"
                },
                {
                    "value": "33300"
                },
                {
                    "value": "38300"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'scrollline2d',
    dataFormat: 'json',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Sales Trends",
            "subCaption": "(2016 to 2017)",
            "xAxisName": "Month",
            "yAxisName": "Revenue",
            "numberPrefix": "$",
            "lineThickness": "3",
            "flatScrollBars": "1",
            "scrollheight": "10",
            "numVisiblePlot": "12",
            "showHoverEffect": "1"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2016"
            }, {
                "label": "Feb 2016"
            }, {
                "label": "Mar 2016"
            }, {
                "label": "Apr 2016"
            }, {
                "label": "May 2016"
            }, {
                "label": "Jun 2016"
            }, {
                "label": "Jul 2016"
            }, {
                "label": "Aug 2016"
            }, {
                "label": "Sep 2016"
            }, {
                "label": "Oct 2016"
            }, {
                "label": "Nov 2016"
            }, {
                "label": "Dec 2016"
            }, {
                "label": "Jan 2017"
            }, {
                "label": "Feb 2017"
            }, {
                "label": "Mar 2017"
            }, {
                "label": "Apr 2017"
            }, {
                "label": "May 2017"
            }, {
                "label": "Jun 2017"
            }, {
                "label": "Jul 2017"
            }, {
                "label": "Aug 2017"
            }, {
                "label": "Sep 2017"
            }, {
                "label": "Oct 2017"
            }, {
                "label": "Nov 2017"
            }, {
                "label": "Dec 2017"
            }]
        }],
        "dataset": [{
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "26300"
            }, {
                "value": "31800"
            }, {
                "value": "30900"
            }, {
                "value": "33000"
            }, {
                "value": "36200"
            }, {
                "value": "32100"
            }, {
                "value": "37500"
            }, {
                "value": "38500"
            }, {
                "value": "35400"
            }, {
                "value": "38200"
            }, {
                "value": "33300"
            }, {
                "value": "38300"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the scroll line 2D chart.

Scroll Area 2D Chart

Let's create the scroll area 2D chart. To render a scroll area chart in 2D, change the value of the type attribute from scrollline2d to scrollarea2d. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of scroll area 2D chart.

A single-series scroll area 2D chart looks like:

FusionCharts will load here..
{ "chart": { "theme": "fusion", "caption": "Sales Trends", "subCaption": "(2016 to 2017)", "xAxisname": "Month", "pYAxisName": "Amount", "labelDisplay": "AUTO", "sYAxisName": "Employees", "numberPrefix": "$", "numVisiblePlot": "8", "flatScrollBars": "1", "scrollheight": "10" }, "categories": [ { "category": [ { "label": "Jan 2016" }, { "label": "Feb 2016" }, { "label": "Mar 2016" }, { "label": "Apr 2016" }, { "label": "May 2016" }, { "label": "Jun 2016" }, { "label": "Jul 2016" }, { "label": "Aug 2016" }, { "label": "Sep 2016" }, { "label": "Oct 2016" }, { "label": "Nov 2016" }, { "label": "Dec 2016" }, { "label": "Jan 2017" }, { "label": "Feb 2017" }, { "label": "Mar 2017" }, { "label": "Apr 2017" }, { "label": "May 2017" }, { "label": "Jun 2017" }, { "label": "Jul 2017" }, { "label": "Aug 2017" }, { "label": "Sep 2017" }, { "label": "Oct 2017" }, { "label": "Nov 2017" }, { "label": "Dec 2017" } ] } ], "dataset": [ { "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "26300" }, { "value": "31800" }, { "value": "30900" }, { "value": "33000" }, { "value": "36200" }, { "value": "32100" }, { "value": "37500" }, { "value": "38500" }, { "value": "35400" }, { "value": "38200" }, { "value": "33300" }, { "value": "38300" } ] } ] }
{
    "chart": {
        "theme": "fusion",
        "caption": "Sales Trends",
        "subCaption": "(2016 to 2017)",
        "xAxisname": "Month",
        "pYAxisName": "Amount",
        "labelDisplay": "AUTO",
        "sYAxisName": "Employees",
        "numberPrefix": "$",
        "numVisiblePlot": "8",
        "flatScrollBars": "1",
        "scrollheight": "10"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "26300"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "30900"
                },
                {
                    "value": "33000"
                },
                {
                    "value": "36200"
                },
                {
                    "value": "32100"
                },
                {
                    "value": "37500"
                },
                {
                    "value": "38500"
                },
                {
                    "value": "35400"
                },
                {
                    "value": "38200"
                },
                {
                    "value": "33300"
                },
                {
                    "value": "38300"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'scrollarea2d',
    dataFormat: 'json',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Sales Trends",
            "subCaption": "(2016 to 2017)",
            "xAxisname": "Month",
            "pYAxisName": "Amount",
            "labelDisplay": "AUTO",
            "sYAxisName": "Employees",
            "numberPrefix": "$",
            "numVisiblePlot": "8",
            "flatScrollBars": "1",
            "scrollheight": "10"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2016"
            }, {
                "label": "Feb 2016"
            }, {
                "label": "Mar 2016"
            }, {
                "label": "Apr 2016"
            }, {
                "label": "May 2016"
            }, {
                "label": "Jun 2016"
            }, {
                "label": "Jul 2016"
            }, {
                "label": "Aug 2016"
            }, {
                "label": "Sep 2016"
            }, {
                "label": "Oct 2016"
            }, {
                "label": "Nov 2016"
            }, {
                "label": "Dec 2016"
            }, {
                "label": "Jan 2017"
            }, {
                "label": "Feb 2017"
            }, {
                "label": "Mar 2017"
            }, {
                "label": "Apr 2017"
            }, {
                "label": "May 2017"
            }, {
                "label": "Jun 2017"
            }, {
                "label": "Jul 2017"
            }, {
                "label": "Aug 2017"
            }, {
                "label": "Sep 2017"
            }, {
                "label": "Oct 2017"
            }, {
                "label": "Nov 2017"
            }, {
                "label": "Dec 2017"
            }]
        }],
        "dataset": [{
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "26300"
            }, {
                "value": "31800"
            }, {
                "value": "30900"
            }, {
                "value": "33000"
            }, {
                "value": "36200"
            }, {
                "value": "32100"
            }, {
                "value": "37500"
            }, {
                "value": "38500"
            }, {
                "value": "35400"
            }, {
                "value": "38200"
            }, {
                "value": "33300"
            }, {
                "value": "38300"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the scroll area 2D chart.

Scroll Stacked Column 2D Chart

Stacked charts are the multi-series charts with the plot datasets on top of each other. Now, let's create a scroll stacked column 2D chart. The example will plot the sales comparison w.r.t. the products and services for FY 2017-FY 2018.

To render a scroll stacked column chart in 2D, change the value of the type attribute to scrollstackedcolumn2d.

For a detailed list of attributes, refer to the chart attributes page of scroll stacked column 2D chart.

A scroll stacked column 2D chart looks like:

FusionCharts will load here..
{ "chart": { "theme": "fusion", "caption": "Sales Comparison", "subCaption": "(2016 to 2017)", "xaxisname": "Month", "yaxisname": "Revenue", "numberprefix": "$", "lineThickness": "3", "flatScrollBars": "1", "scrollheight": "10", "numVisiblePlot": "12", "showHoverEffect": "1" }, "categories": [ { "category": [ { "label": "Jan 2016" }, { "label": "Feb 2016" }, { "label": "Mar 2016" }, { "label": "Apr 2016" }, { "label": "May 2016" }, { "label": "Jun 2016" }, { "label": "Jul 2016" }, { "label": "Aug 2016" }, { "label": "Sep 2016" }, { "label": "Oct 2016" }, { "label": "Nov 2016" }, { "label": "Dec 2016" }, { "label": "Jan 2017" }, { "label": "Feb 2017" }, { "label": "Mar 2017" }, { "label": "Apr 2017" }, { "label": "May 2017" }, { "label": "Jun 2017" }, { "label": "Jul 2017" }, { "label": "Aug 2017" }, { "label": "Sep 2017" }, { "label": "Oct 2017" }, { "label": "Nov 2017" }, { "label": "Dec 2017" } ] } ], "dataset": [ { "seriesname": "Products", "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "25400" }, { "value": "27800" }, { "value": "23800" }, { "value": "23800" }, { "value": "21600" }, { "value": "30600" }, { "value": "24800" }, { "value": "30700" }, { "value": "27400" }, { "value": "28200" }, { "value": "31500" }, { "value": "24300" } ] }, { "seriesname": "Services", "data": [ { "value": "10000" }, { "value": "11500" }, { "value": "12500" }, { "value": "15000" }, { "value": "11000" }, { "value": "9800" }, { "value": "11800" }, { "value": "19700" }, { "value": "21700" }, { "value": "21900" }, { "value": "22900" }, { "value": "20800" }, { "value": "12000" }, { "value": "10300" }, { "value": "11200" }, { "value": "13000" }, { "value": "15000" }, { "value": "11800" }, { "value": "9800" }, { "value": "14600" }, { "value": "19200" }, { "value": "20100" }, { "value": "21200" }, { "value": "19500" } ] } ] }
{
    "chart": {
        "theme": "fusion",
        "caption": "Sales Comparison",
        "subCaption": "(2016 to 2017)",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "numberprefix": "$",
        "lineThickness": "3",
        "flatScrollBars": "1",
        "scrollheight": "10",
        "numVisiblePlot": "12",
        "showHoverEffect": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Products",
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "25400"
                },
                {
                    "value": "27800"
                },
                {
                    "value": "23800"
                },
                {
                    "value": "23800"
                },
                {
                    "value": "21600"
                },
                {
                    "value": "30600"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "30700"
                },
                {
                    "value": "27400"
                },
                {
                    "value": "28200"
                },
                {
                    "value": "31500"
                },
                {
                    "value": "24300"
                }
            ]
        },
        {
            "seriesname": "Services",
            "data": [
                {
                    "value": "10000"
                },
                {
                    "value": "11500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "11000"
                },
                {
                    "value": "9800"
                },
                {
                    "value": "11800"
                },
                {
                    "value": "19700"
                },
                {
                    "value": "21700"
                },
                {
                    "value": "21900"
                },
                {
                    "value": "22900"
                },
                {
                    "value": "20800"
                },
                {
                    "value": "12000"
                },
                {
                    "value": "10300"
                },
                {
                    "value": "11200"
                },
                {
                    "value": "13000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "11800"
                },
                {
                    "value": "9800"
                },
                {
                    "value": "14600"
                },
                {
                    "value": "19200"
                },
                {
                    "value": "20100"
                },
                {
                    "value": "21200"
                },
                {
                    "value": "19500"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'scrollstackedcolumn2d',
    dataFormat: 'json',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Sales Comparison",
            "subCaption": "(2016 to 2017)",
            "xaxisname": "Month",
            "yaxisname": "Revenue",
            "numberprefix": "$",
            "lineThickness": "3",
            "flatScrollBars": "1",
            "scrollheight": "10",
            "numVisiblePlot": "12",
            "showHoverEffect": "1"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2016"
            }, {
                "label": "Feb 2016"
            }, {
                "label": "Mar 2016"
            }, {
                "label": "Apr 2016"
            }, {
                "label": "May 2016"
            }, {
                "label": "Jun 2016"
            }, {
                "label": "Jul 2016"
            }, {
                "label": "Aug 2016"
            }, {
                "label": "Sep 2016"
            }, {
                "label": "Oct 2016"
            }, {
                "label": "Nov 2016"
            }, {
                "label": "Dec 2016"
            }, {
                "label": "Jan 2017"
            }, {
                "label": "Feb 2017"
            }, {
                "label": "Mar 2017"
            }, {
                "label": "Apr 2017"
            }, {
                "label": "May 2017"
            }, {
                "label": "Jun 2017"
            }, {
                "label": "Jul 2017"
            }, {
                "label": "Aug 2017"
            }, {
                "label": "Sep 2017"
            }, {
                "label": "Oct 2017"
            }, {
                "label": "Nov 2017"
            }, {
                "label": "Dec 2017"
            }]
        }],
        "dataset": [{
            "seriesname": "Products",
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "25400"
            }, {
                "value": "27800"
            }, {
                "value": "23800"
            }, {
                "value": "23800"
            }, {
                "value": "21600"
            }, {
                "value": "30600"
            }, {
                "value": "24800"
            }, {
                "value": "30700"
            }, {
                "value": "27400"
            }, {
                "value": "28200"
            }, {
                "value": "31500"
            }, {
                "value": "24300"
            }]
        }, {
            "seriesname": "Services",
            "data": [{
                "value": "10000"
            }, {
                "value": "11500"
            }, {
                "value": "12500"
            }, {
                "value": "15000"
            }, {
                "value": "11000"
            }, {
                "value": "9800"
            }, {
                "value": "11800"
            }, {
                "value": "19700"
            }, {
                "value": "21700"
            }, {
                "value": "21900"
            }, {
                "value": "22900"
            }, {
                "value": "20800"
            }, {
                "value": "12000"
            }, {
                "value": "10300"
            }, {
                "value": "11200"
            }, {
                "value": "13000"
            }, {
                "value": "15000"
            }, {
                "value": "11800"
            }, {
                "value": "9800"
            }, {
                "value": "14600"
            }, {
                "value": "19200"
            }, {
                "value": "20100"
            }, {
                "value": "21200"
            }, {
                "value": "19500"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the scroll stacked column 2D chart.

Scroll Combination 2D Chart

Now, we will create a scroll combination 2D chart to plot the revenue and the profit earned, in dollars, and the profit for FY 2017-FY 2018.

To render a scroll combination 2D chart, change the value of the type attribute to scrollcombi2d.

For a detailed list of attributes, refer to the chart attributes page of scroll combination 2D chart.

A scroll combination 2D chart looks like:

FusionCharts will load here..
{ "chart": { "theme": "fusion", "caption": "Actual Revenue, Targeted Revenues & Profits", "subCaption": "2016 - 2017", "xAxisname": "Month", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "numVisiblePlot": "12", "scrollheight": "10", "flatScrollBars": "1", "scrollShowButtons": "0", "scrollColor": "#cccccc", "showHoverEffect": "1" }, "categories": [ { "category": [ { "label": "Jan 2016" }, { "label": "Feb 2016" }, { "label": "Mar 2016" }, { "label": "Apr 2016" }, { "label": "May 2016" }, { "label": "Jun 2016" }, { "label": "Jul 2016" }, { "label": "Aug 2016" }, { "label": "Sep 2016" }, { "label": "Oct 2016" }, { "label": "Nov 2016" }, { "label": "Dec 2016" }, { "label": "Jan 2017" }, { "label": "Feb 2017" }, { "label": "Mar 2017" }, { "label": "Apr 2017" }, { "label": "May 2017" }, { "label": "Jun 2017" }, { "label": "Jul 2017" }, { "label": "Aug 2017" }, { "label": "Sep 2017" }, { "label": "Oct 2017" }, { "label": "Nov 2017" }, { "label": "Dec 2017" } ] } ], "dataset": [ { "seriesName": "Actual Revenue", "data": [ { "value": "16000" }, { "value": "20000" }, { "value": "18000" }, { "value": "19000" }, { "value": "15000" }, { "value": "21000" }, { "value": "16000" }, { "value": "20000" }, { "value": "17000" }, { "value": "25000" }, { "value": "19000" }, { "value": "23000" }, { "value": "22000" }, { "value": "25000" }, { "value": "21000" }, { "value": "23000" }, { "value": "27000" }, { "value": "26000" }, { "value": "24000" }, { "value": "28000" }, { "value": "26000" }, { "value": "27000" }, { "value": "29000" }, { "value": "26000" } ] }, { "seriesName": "Projected Revenue", "renderAs": "line", "showValues": "0", "data": [ { "value": "15000" }, { "value": "16000" }, { "value": "17000" }, { "value": "18000" }, { "value": "19000" }, { "value": "19000" }, { "value": "19000" }, { "value": "19000" }, { "value": "20000" }, { "value": "21000" }, { "value": "22000" }, { "value": "23000" }, { "value": "24000" }, { "value": "22000" }, { "value": "23000" }, { "value": "25000" }, { "value": "22000" }, { "value": "20000" }, { "value": "24000" }, { "value": "25000" }, { "value": "27000" }, { "value": "24000" }, { "value": "23000" }, { "value": "25000" } ] }, { "seriesName": "Profit", "renderAs": "area", "showValues": "0", "data": [ { "value": "4000" }, { "value": "5000" }, { "value": "3000" }, { "value": "4000" }, { "value": "1000" }, { "value": "7000" }, { "value": "1000" }, { "value": "4000" }, { "value": "1000" }, { "value": "8000" }, { "value": "2000" }, { "value": "7000" }, { "value": "6000" }, { "value": "5000" }, { "value": "7000" }, { "value": "8000" }, { "value": "8000" }, { "value": "9000" }, { "value": "7000" }, { "value": "10000" }, { "value": "9000" }, { "value": "7000" }, { "value": "8000" }, { "value": "11000" } ] } ] }
{
    "chart": {
        "theme": "fusion",
        "caption": "Actual Revenue, Targeted Revenues & Profits",
        "subCaption": "2016 - 2017",
        "xAxisname": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "numVisiblePlot": "12",
        "scrollheight": "10",
        "flatScrollBars": "1",
        "scrollShowButtons": "0",
        "scrollColor": "#cccccc",
        "showHoverEffect": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Actual Revenue",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "25000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "25000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "27000"
                },
                {
                    "value": "26000"
                },
                {
                    "value": "24000"
                },
                {
                    "value": "28000"
                },
                {
                    "value": "26000"
                },
                {
                    "value": "27000"
                },
                {
                    "value": "29000"
                },
                {
                    "value": "26000"
                }
            ]
        },
        {
            "seriesName": "Projected Revenue",
            "renderAs": "line",
            "showValues": "0",
            "data": [
                {
                    "value": "15000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "24000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "25000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "24000"
                },
                {
                    "value": "25000"
                },
                {
                    "value": "27000"
                },
                {
                    "value": "24000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "25000"
                }
            ]
        },
        {
            "seriesName": "Profit",
            "renderAs": "area",
            "showValues": "0",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "6000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "9000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "10000"
                },
                {
                    "value": "9000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "11000"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'scrollcombi2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Actual Revenue, Targeted Revenues & Profits",
            "subCaption": "2016 - 2017",
            "xAxisname": "Month",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "numVisiblePlot": "12",
            "scrollheight": "10",
            "flatScrollBars": "1",
            "scrollShowButtons": "0",
            "scrollColor": "#cccccc",
            "showHoverEffect": "1",
        },
        "categories": [{
            "category": [{
                "label": "Jan 2016"
            }, {
                "label": "Feb 2016"
            }, {
                "label": "Mar 2016"
            }, {
                "label": "Apr 2016"
            }, {
                "label": "May 2016"
            }, {
                "label": "Jun 2016"
            }, {
                "label": "Jul 2016"
            }, {
                "label": "Aug 2016"
            }, {
                "label": "Sep 2016"
            }, {
                "label": "Oct 2016"
            }, {
                "label": "Nov 2016"
            }, {
                "label": "Dec 2016"
            }, {
                "label": "Jan 2017"
            }, {
                "label": "Feb 2017"
            }, {
                "label": "Mar 2017"
            }, {
                "label": "Apr 2017"
            }, {
                "label": "May 2017"
            }, {
                "label": "Jun 2017"
            }, {
                "label": "Jul 2017"
            }, {
                "label": "Aug 2017"
            }, {
                "label": "Sep 2017"
            }, {
                "label": "Oct 2017"
            }, {
                "label": "Nov 2017"
            }, {
                "label": "Dec 2017"
            }]
        }],
        "dataset": [{
            "seriesName": "Actual Revenue",
            "data": [{
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "15000"
            }, {
                "value": "21000"
            }, {
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "17000"
            }, {
                "value": "25000"
            }, {
                "value": "19000"
            }, {
                "value": "23000"
            }, {
                "value": "22000"
            }, {
                "value": "25000"
            }, {
                "value": "21000"
            }, {
                "value": "23000"
            }, {
                "value": "27000"
            }, {
                "value": "26000"
            }, {
                "value": "24000"
            }, {
                "value": "28000"
            }, {
                "value": "26000"
            }, {
                "value": "27000"
            }, {
                "value": "29000"
            }, {
                "value": "26000"
            }]
        }, {
            "seriesName": "Projected Revenue",
            "renderAs": "line",
            "showValues": "0",
            "data": [{
                "value": "15000"
            }, {
                "value": "16000"
            }, {
                "value": "17000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "19000"
            }, {
                "value": "20000"
            }, {
                "value": "21000"
            }, {
                "value": "22000"
            }, {
                "value": "23000"
            }, {
                "value": "24000"
            }, {
                "value": "22000"
            }, {
                "value": "23000"
            }, {
                "value": "25000"
            }, {
                "value": "22000"
            }, {
                "value": "20000"
            }, {
                "value": "24000"
            }, {
                "value": "25000"
            }, {
                "value": "27000"
            }, {
                "value": "24000"
            }, {
                "value": "23000"
            }, {
                "value": "25000"
            }]
        }, {
            "seriesName": "Profit",
            "renderAs": "area",
            "showValues": "0",
            "data": [{
                "value": "4000"
            }, {
                "value": "5000"
            }, {
                "value": "3000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "7000"
            }, {
                "value": "1000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "8000"
            }, {
                "value": "2000"
            }, {
                "value": "7000"
            }, {
                "value": "6000"
            }, {
                "value": "5000"
            }, {
                "value": "7000"
            }, {
                "value": "8000"
            }, {
                "value": "8000"
            }, {
                "value": "9000"
            }, {
                "value": "7000"
            }, {
                "value": "10000"
            }, {
                "value": "9000"
            }, {
                "value": "7000"
            }, {
                "value": "8000"
            }, {
                "value": "11000"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the scroll stacked column 2D chart.

Scroll Combination 2D Dual Y-axis Chart

To create a scroll combination 2D chart with a dual y-axis, change the value of the type attribute to scrollcombidy2d. Here we will plot the revenue and the profit earned, in dollars, and the profit percent for FY 2017-FY 2018.

For a detailed list of attributes, refer to the chart attributes page of croll combination 2D dual y-axis chart.

The scroll combination 2D chart (dual Y) chart thus created looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fusion", "caption": "Revenues and Profits", "subCaption": "(2016 to 2017)", "xAxisname": "Month", "pYAxisName": "Amount (In USD)", "sYAxisName": "Profit %", "numberPrefix": "$", "sNumberSuffix": "%", "sYAxisMaxValue": "50", "showValues": "1", "numVisiblePlot": "12", "flatScrollBars": "1", "scrollheight": "10" }, "categories": [ { "category": [ { "label": "Jan 2016" }, { "label": "Feb 2016" }, { "label": "Mar 2016" }, { "label": "Apr 2016" }, { "label": "May 2016" }, { "label": "Jun 2016" }, { "label": "Jul 2016" }, { "label": "Aug 2016" }, { "label": "Sep 2016" }, { "label": "Oct 2016" }, { "label": "Nov 2016" }, { "label": "Dec 2016" }, { "label": "Jan 2017" }, { "label": "Feb 2017" }, { "label": "Mar 2017" }, { "label": "Apr 2017" }, { "label": "May 2017" }, { "label": "Jun 2017" }, { "label": "Jul 2017" }, { "label": "Aug 2017" }, { "label": "Sep 2017" }, { "label": "Oct 2017" }, { "label": "Nov 2017" }, { "label": "Dec 2017" } ] } ], "dataset": [ { "seriesName": "Revenues", "data": [ { "value": "16000" }, { "value": "20000" }, { "value": "18000" }, { "value": "19000" }, { "value": "15000" }, { "value": "21000" }, { "value": "16000" }, { "value": "20000" }, { "value": "17000" }, { "value": "22000" }, { "value": "19000" }, { "value": "23000" }, { "value": "24000" }, { "value": "25000" }, { "value": "26000" }, { "value": "24000" }, { "value": "19000" }, { "value": "22000" }, { "value": "18000" }, { "value": "19000" }, { "value": "22000" }, { "value": "21000" }, { "value": "23000" }, { "value": "24000" } ] }, { "seriesName": "Profits", "renderAs": "area", "showValues": "0", "data": [ { "value": "4000" }, { "value": "5000" }, { "value": "3000" }, { "value": "4000" }, { "value": "1000" }, { "value": "7000" }, { "value": "1000" }, { "value": "4000" }, { "value": "1000" }, { "value": "8000" }, { "value": "2000" }, { "value": "7000" }, { "value": "6000" }, { "value": "7000" }, { "value": "4000" }, { "value": "5000" }, { "value": "3000" }, { "value": "9000" }, { "value": "2000" }, { "value": "6000" }, { "value": "2000" }, { "value": "7000" }, { "value": "4000" }, { "value": "6000" } ] }, { "seriesName": "Profit %", "parentYAxis": "S", "renderAs": "line", "showValues": "0", "data": [ { "value": "25" }, { "value": "25" }, { "value": "16.66" }, { "value": "21.05" }, { "value": "6.66" }, { "value": "33.33" }, { "value": "6.25" }, { "value": "25" }, { "value": "5.88" }, { "value": "36.36" }, { "value": "10.52" }, { "value": "30.43" }, { "value": "25" }, { "value": "28" }, { "value": "15.38" }, { "value": "20.83" }, { "value": "15.79" }, { "value": "40.91" }, { "value": "11.11" }, { "value": "31.58" }, { "value": "9.09" }, { "value": "33.33" }, { "value": "17.39" }, { "value": "25" } ] } ] }
{
    "chart": {
        "theme": "fusion",
        "caption": "Revenues and Profits",
        "subCaption": "(2016 to 2017)",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "Profit %",
        "numberPrefix": "$",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "50",
        "showValues": "1",
        "numVisiblePlot": "12",
        "flatScrollBars": "1",
        "scrollheight": "10"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Revenues",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "24000"
                },
                {
                    "value": "25000"
                },
                {
                    "value": "26000"
                },
                {
                    "value": "24000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "23000"
                },
                {
                    "value": "24000"
                }
            ]
        },
        {
            "seriesName": "Profits",
            "renderAs": "area",
            "showValues": "0",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "6000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "9000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "6000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "6000"
                }
            ]
        },
        {
            "seriesName": "Profit %",
            "parentYAxis": "S",
            "renderAs": "line",
            "showValues": "0",
            "data": [
                {
                    "value": "25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "16.66"
                },
                {
                    "value": "21.05"
                },
                {
                    "value": "6.66"
                },
                {
                    "value": "33.33"
                },
                {
                    "value": "6.25"
                },
                {
                    "value": "25"
                },
                {
                    "value": "5.88"
                },
                {
                    "value": "36.36"
                },
                {
                    "value": "10.52"
                },
                {
                    "value": "30.43"
                },
                {
                    "value": "25"
                },
                {
                    "value": "28"
                },
                {
                    "value": "15.38"
                },
                {
                    "value": "20.83"
                },
                {
                    "value": "15.79"
                },
                {
                    "value": "40.91"
                },
                {
                    "value": "11.11"
                },
                {
                    "value": "31.58"
                },
                {
                    "value": "9.09"
                },
                {
                    "value": "33.33"
                },
                {
                    "value": "17.39"
                },
                {
                    "value": "25"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'scrollcombidy2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Revenues and Profits",
            "subCaption": "(2016 to 2017)",
            "xAxisname": "Month",
            "pYAxisName": "Amount (In USD)",
            "sYAxisName": "Profit %",
            "numberPrefix": "$",
            "sNumberSuffix": "%",
            "sYAxisMaxValue": "50",
            "showValues": "1",
            "numVisiblePlot": "12",
            "flatScrollBars": "1",
            "scrollheight": "10"
        },
        "categories": [{
            "category": [{
                    "label": "Jan 2016"
                },
                {
                    "label": "Feb 2016"
                },
                {
                    "label": "Mar 2016"
                },
                {
                    "label": "Apr 2016"
                },
                {
                    "label": "May 2016"
                },
                {
                    "label": "Jun 2016"
                },
                {
                    "label": "Jul 2016"
                },
                {
                    "label": "Aug 2016"
                },
                {
                    "label": "Sep 2016"
                },
                {
                    "label": "Oct 2016"
                },
                {
                    "label": "Nov 2016"
                },
                {
                    "label": "Dec 2016"
                },
                {
                    "label": "Jan 2017"
                },
                {
                    "label": "Feb 2017"
                },
                {
                    "label": "Mar 2017"
                },
                {
                    "label": "Apr 2017"
                },
                {
                    "label": "May 2017"
                },
                {
                    "label": "Jun 2017"
                },
                {
                    "label": "Jul 2017"
                },
                {
                    "label": "Aug 2017"
                },
                {
                    "label": "Sep 2017"
                },
                {
                    "label": "Oct 2017"
                },
                {
                    "label": "Nov 2017"
                },
                {
                    "label": "Dec 2017"
                }
            ]
        }],
        "dataset": [{
                "seriesName": "Revenues",
                "data": [{
                        "value": "16000"
                    },
                    {
                        "value": "20000"
                    },
                    {
                        "value": "18000"
                    },
                    {
                        "value": "19000"
                    },
                    {
                        "value": "15000"
                    },
                    {
                        "value": "21000"
                    },
                    {
                        "value": "16000"
                    },
                    {
                        "value": "20000"
                    },
                    {
                        "value": "17000"
                    },
                    {
                        "value": "22000"
                    },
                    {
                        "value": "19000"
                    },
                    {
                        "value": "23000"
                    },
                    {
                        "value": "24000"
                    },
                    {
                        "value": "25000"
                    },
                    {
                        "value": "26000"
                    },
                    {
                        "value": "24000"
                    },
                    {
                        "value": "19000"
                    },
                    {
                        "value": "22000"
                    },
                    {
                        "value": "18000"
                    },
                    {
                        "value": "19000"
                    },
                    {
                        "value": "22000"
                    },
                    {
                        "value": "21000"
                    },
                    {
                        "value": "23000"
                    },
                    {
                        "value": "24000"
                    }
                ]
            },
            {
                "seriesName": "Profits",
                "renderAs": "area",
                "showValues": "0",
                "data": [{
                        "value": "4000"
                    },
                    {
                        "value": "5000"
                    },
                    {
                        "value": "3000"
                    },
                    {
                        "value": "4000"
                    },
                    {
                        "value": "1000"
                    },
                    {
                        "value": "7000"
                    },
                    {
                        "value": "1000"
                    },
                    {
                        "value": "4000"
                    },
                    {
                        "value": "1000"
                    },
                    {
                        "value": "8000"
                    },
                    {
                        "value": "2000"
                    },
                    {
                        "value": "7000"
                    },
                    {
                        "value": "6000"
                    },
                    {
                        "value": "7000"
                    },
                    {
                        "value": "4000"
                    },
                    {
                        "value": "5000"
                    },
                    {
                        "value": "3000"
                    },
                    {
                        "value": "9000"
                    },
                    {
                        "value": "2000"
                    },
                    {
                        "value": "6000"
                    },
                    {
                        "value": "2000"
                    },
                    {
                        "value": "7000"
                    },
                    {
                        "value": "4000"
                    },
                    {
                        "value": "6000"
                    }
                ]
            },
            {
                "seriesName": "Profit %",
                "parentYAxis": "S",
                "renderAs": "line",
                "showValues": "0",
                "data": [{
                        "value": "25"
                    },
                    {
                        "value": "25"
                    },
                    {
                        "value": "16.66"
                    },
                    {
                        "value": "21.05"
                    },
                    {
                        "value": "6.66"
                    },
                    {
                        "value": "33.33"
                    },
                    {
                        "value": "6.25"
                    },
                    {
                        "value": "25"
                    },
                    {
                        "value": "5.88"
                    },
                    {
                        "value": "36.36"
                    },
                    {
                        "value": "10.52"
                    },
                    {
                        "value": "30.43"
                    },
                    {
                        "value": "25"
                    },
                    {
                        "value": "28"
                    },
                    {
                        "value": "15.38"
                    },
                    {
                        "value": "20.83"
                    },
                    {
                        "value": "15.79"
                    },
                    {
                        "value": "40.91"
                    },
                    {
                        "value": "11.11"
                    },
                    {
                        "value": "31.58"
                    },
                    {
                        "value": "9.09"
                    },
                    {
                        "value": "33.33"
                    },
                    {
                        "value": "17.39"
                    },
                    {
                        "value": "25"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the scroll combination 2D chart with a dual y-axis.

Now, let's customize the appearance and properties of the charts.

Configure the Number of Visible Data Plots

Scroll charts are generally used to avoid cluttering. With that in FusionCharts, you can also configure the number of data plots that will be visible in the scroll pane when the chart is first loaded. To configure this specify the number of visible plots using the numVisiblePlot attribute.

Refer to the code given below:

{
  "chart": {
    "numVisiblePlot": "12"
  }
}

A scroll chart with the number of visible data plots set to twelve looks like this:

FusionCharts will load here..

Click here to edit the scroll column 2D chart.

Render a Scroll Bar with Gradient Effect

By default, a scroll chart has a flat scroll bar. You can opt to render a gradient scroll to visually enhance your chart. To render the scroll in gradient set the flatScrollBars attribute to 0.

Refer to the code given below:

{
  "chart": {
    "flatScrollBars": "0"
  }
}

A scroll chart with a gradient scroll bar looks like this:

FusionCharts will load here..

Click here to edit the scroll column 2D chart.

Customizing the Scroll Bar

The scroll bar of the scroll chart can be customized using the cosmetic properties. To the customize the scroll bar, follow the steps below:

  • Specify the hex code for the scroll color code using the scrollColor attribute.

  • Specify the height of the scroll bar using the scrollHeight attribute.

  • Set the distance of the scroll bar from the canvas using the scrollPadding attribute.

Refer to the code given below:

{
  "chart": {
    "scrollColor": "#3a4660",
    "scrollHeight": "12",
    "scrollPadding": "5"
  }
}

A scroll chart with the cosmetic properties of the scroll bar customized looks like this:

FusionCharts will load here..

Click here to edit the scroll column 2D chart.

Was this article helpful to you ?