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 Bar 2D Chart
Scroll Line 2D Chart
Scroll Area 2D Chart
Scroll Stacked Column 2D Chart
Scroll Stacked Bar 2D Chart
Scroll Combination 2D Chart (Single Y)
Scroll Combination 2D Chart (Dual Y)
Scroll Multi-series Stacked Column 2D
Scroll Multi-series Stacked Column 2D + Line (Dual Y)
Scroll Column 2D Chart
Let's create a scroller plot 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
typeattribute. To render a scroll column 2D chart, setscrollcolumn2d.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
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" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset>
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="26300" />
<set value="31800" />
<set value="30900" />
<set value="33000" />
<set value="36200" />
<set value="32100" />
<set value="37500" />
<set value="38500" />
<set value="35400" />
<set value="38200" />
<set value="33300" />
<set value="38300" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollColumn2d',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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 Bar 2D Chart
Now, let's create a scroll bar 2D chart. To render a scroll bar chart in 2D, change the value of the type attribute from scrollColumn2D to scrollBar2D. The rest of the data structure remains the same.
For the detailed list of attributes, refer to the chart attributes page of the scroll bar 2D chart.
A single-series scroller vertical bar 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Top 25 NPM Packages for Node.js Developers",
"subCaption": "March 2019",
"plottooltext": "$datavalue Downloads",
"YAxisname": "Number of Downloads",
"XAxisname": "Packages"
},
"categories": [
{
"category": [
{
"label": "Commander.js"
},
{
"label": "Async.js"
},
{
"label": "Request – Simplified HTTP Client"
},
{
"label": "Express"
},
{
"label": "WebPack"
},
{
"label": "Underscore"
},
{
"label": "React"
},
{
"label": "JSDom"
},
{
"label": "Cheerio"
},
{
"label": "Mocha"
},
{
"label": "Marked"
},
{
"label": "LESS"
},
{
"label": "Morgan"
},
{
"label": "Karma"
},
{
"label": "MongoDB Node.JS Driver"
},
{
"label": "Nodemailer"
},
{
"label": "Passport"
},
{
"label": "Browserify"
},
{
"label": "Grunt"
},
{
"label": "JSHint"
},
{
"label": "Angular"
},
{
"label": "Bower"
},
{
"label": "Pug"
},
{
"label": "PM2"
},
{
"label": "Hapi"
}
]
}
],
"dataset": [
{
"data": [
{
"value": "97294205"
},
{
"value": "95482197"
},
{
"value": "60224172"
},
{
"value": "33018247"
},
{
"value": "31615028"
},
{
"value": "28984878"
},
{
"value": "25391784"
},
{
"value": "23581733"
},
{
"value": "12321215"
},
{
"value": "10838161"
},
{
"value": "7808888"
},
{
"value": "7127519"
},
{
"value": "6659395"
},
{
"value": "5731933"
},
{
"value": "4843888"
},
{
"value": "3264090"
},
{
"value": "2755188"
},
{
"value": "2661761"
},
{
"value": "2371272"
},
{
"value": "2201511"
},
{
"value": "1821149"
},
{
"value": "1683996"
},
{
"value": "1602832"
},
{
"value": "1267422"
},
{
"value": "1042206"
}
]
}
]
}<chart theme="fusion" caption="Top 25 NPM Packages for Node.js Developers" subcaption="March 2019" plottooltext="$datavalue Downloads" yaxisname="Number of Downloads" xaxisname="Packages">
<categories>
<category label="Commander.js" />
<category label="Async.js" />
<category label="Request – Simplified HTTP Client" />
<category label="Express" />
<category label="WebPack" />
<category label="Underscore" />
<category label="React" />
<category label="JSDom" />
<category label="Cheerio" />
<category label="Mocha" />
<category label="Marked" />
<category label="LESS" />
<category label="Morgan" />
<category label="Karma" />
<category label="MongoDB Node.JS Driver" />
<category label="Nodemailer" />
<category label="Passport" />
<category label="Browserify" />
<category label="Grunt" />
<category label="JSHint" />
<category label="Angular" />
<category label="Bower" />
<category label="Pug" />
<category label="PM2" />
<category label="Hapi" />
</categories>
<dataset>
<set value="97294205" />
<set value="95482197" />
<set value="60224172" />
<set value="33018247" />
<set value="31615028" />
<set value="28984878" />
<set value="25391784" />
<set value="23581733" />
<set value="12321215" />
<set value="10838161" />
<set value="7808888" />
<set value="7127519" />
<set value="6659395" />
<set value="5731933" />
<set value="4843888" />
<set value="3264090" />
<set value="2755188" />
<set value="2661761" />
<set value="2371272" />
<set value="2201511" />
<set value="1821149" />
<set value="1683996" />
<set value="1602832" />
<set value="1267422" />
<set value="1042206" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollbar2d',
renderAt: 'container',
width: '600',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Top 25 NPM Packages for Node.js Developers",
"subCaption": "March 2019",
"plottooltext": "$datavalue Downloads",
"YAxisname": "Number of Downloads",
"XAxisname": "Packages",
},
"categories": [{
"category": [{
"label": "Commander.js"
},
{
"label": "Async.js"
},
{
"label": "Request – Simplified HTTP Client"
},
{
"label": "Express"
},
{
"label": "WebPack"
},
{
"label": "Underscore"
},
{
"label": "React"
},
{
"label": "JSDom"
},
{
"label": "Cheerio"
},
{
"label": "Mocha"
},
{
"label": "Marked"
},
{
"label": "LESS"
},
{
"label": "Morgan"
},
{
"label": "Karma"
},
{
"label": "MongoDB Node.JS Driver"
},
{
"label": "Nodemailer"
},
{
"label": "Passport"
},
{
"label": "Browserify"
},
{
"label": "Grunt"
},
{
"label": "JSHint"
},
{
"label": "Angular"
},
{
"label": "Bower"
},
{
"label": "Pug"
},
{
"label": "PM2"
},
{
"label": "Hapi"
}
]
}],
"dataset": [{
"data": [{
"value": "97294205"
},
{
"value": "95482197"
},
{
"value": "60224172"
},
{
"value": "33018247"
},
{
"value": "31615028"
},
{
"value": "28984878"
},
{
"value": "25391784"
},
{
"value": "23581733"
},
{
"value": "12321215"
},
{
"value": "10838161"
},
{
"value": "7808888"
},
{
"value": "7127519"
},
{
"value": "6659395"
},
{
"value": "5731933"
},
{
"value": "4843888"
},
{
"value": "3264090"
},
{
"value": "2755188"
},
{
"value": "2661761"
},
{
"value": "2371272"
},
{
"value": "2201511"
},
{
"value": "1821149"
},
{
"value": "1683996"
},
{
"value": "1602832"
},
{
"value": "1267422"
},
{
"value": "1042206"
},
]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll bar 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 scrollBar2D 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" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset>
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="26300" />
<set value="31800" />
<set value="30900" />
<set value="33000" />
<set value="36200" />
<set value="32100" />
<set value="37500" />
<set value="38500" />
<set value="35400" />
<set value="38200" />
<set value="33300" />
<set value="38300" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollline2d',
dataFormat: 'json',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset>
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="26300" />
<set value="31800" />
<set value="30900" />
<set value="33000" />
<set value="36200" />
<set value="32100" />
<set value="37500" />
<set value="38500" />
<set value="35400" />
<set value="38200" />
<set value="33300" />
<set value="38300" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollarea2d',
dataFormat: 'json',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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 scroller plot 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" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset seriesname="Products">
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="25400" />
<set value="27800" />
<set value="23800" />
<set value="23800" />
<set value="21600" />
<set value="30600" />
<set value="24800" />
<set value="30700" />
<set value="27400" />
<set value="28200" />
<set value="31500" />
<set value="24300" />
</dataset>
<dataset seriesname="Services">
<set value="10000" />
<set value="11500" />
<set value="12500" />
<set value="15000" />
<set value="11000" />
<set value="9800" />
<set value="11800" />
<set value="19700" />
<set value="21700" />
<set value="21900" />
<set value="22900" />
<set value="20800" />
<set value="12000" />
<set value="10300" />
<set value="11200" />
<set value="13000" />
<set value="15000" />
<set value="11800" />
<set value="9800" />
<set value="14600" />
<set value="19200" />
<set value="20100" />
<set value="21200" />
<set value="19500" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollstackedcolumn2d',
dataFormat: 'json',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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 Stacked Bar 2D Chart
Let's create a scroll stacked bar 2D chart. To render a scroll stacked bar chart in 2D, change the value of the type attribute to scrollStackedBar2D.
For a detailed list of attributes, refer to the chart attributes page of the scroll stacked bar 2D chart.
A scroll stacked scroller vertical 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"numVisiblePlot": "5",
"caption": "Video games sales breakup",
"subcaption": "Across different markets (In Million USD)",
"numbersuffix": "M",
"plottooltext": "<b>$seriesName</b><hr>$label: <b>$dataValue</b>"
},
"categories": [
{
"category": [
{
"label": "Wii Sports"
},
{
"label": "Super Mario Bros"
},
{
"label": "Mario Kart Wii"
},
{
"label": "Wii Sports Resort"
},
{
"label": "Pokemon Red/Pokemon Blue"
},
{
"label": "Tetris"
},
{
"label": "New Super Mario Bros"
},
{
"label": "Wii Play"
},
{
"label": "New Super Mario Bros. Wii"
},
{
"label": "Duck Hunt"
},
{
"label": "Nintendogs"
},
{
"label": "Mario Kart DS"
},
{
"label": "Pokemon Gold/Pokemon Silver"
},
{
"label": "Wii Fit"
},
{
"label": "Wii Fit Plus"
},
{
"label": "Kinect Adventures"
},
{
"label": "Grand Theft Auto V"
},
{
"label": "Grand Theft Auto: San Andreas"
},
{
"label": "Super Mario World"
},
{
"label": "Brain Age"
},
{
"label": "Pokemon Diamond/Pokemon Pearl"
},
{
"label": "Super Mario Land"
},
{
"label": "Super Mario Bros. 3"
},
{
"label": "Grand Theft Auto V"
},
{
"label": "Grand Theft Auto: Vice City"
}
]
}
],
"dataSet": [
{
"seriesName": "North America",
"data": [
{
"value": "41.49"
},
{
"value": "29.08"
},
{
"value": "15.85"
},
{
"value": "15.75"
},
{
"value": "11.27"
},
{
"value": "23.2"
},
{
"value": "11.38"
},
{
"value": "14.03"
},
{
"value": "14.59"
},
{
"value": "26.93"
},
{
"value": "9.07"
},
{
"value": "9.81"
},
{
"value": "9"
},
{
"value": "8.94"
},
{
"value": "9.09"
},
{
"value": "14.97"
},
{
"value": "7.01"
},
{
"value": "9.43"
},
{
"value": "12.78"
},
{
"value": "4.75"
},
{
"value": "6.42"
},
{
"value": "10.83"
},
{
"value": "9.54"
},
{
"value": "9.63"
},
{
"value": "8.41"
}
]
},
{
"seriesName": "Europe ",
"data": [
{
"value": "29.02"
},
{
"value": "3.58"
},
{
"value": "12.88"
},
{
"value": "11.01"
},
{
"value": "8.89"
},
{
"value": "2.26"
},
{
"value": "9.23"
},
{
"value": "9.2"
},
{
"value": "7.06"
},
{
"value": "0.63"
},
{
"value": "11"
},
{
"value": "7.57"
},
{
"value": "6.18"
},
{
"value": "8.03"
},
{
"value": "8.59"
},
{
"value": "4.94"
},
{
"value": "9.27"
},
{
"value": "0.4"
},
{
"value": "3.75"
},
{
"value": "9.26"
},
{
"value": "4.52"
},
{
"value": "2.71"
},
{
"value": "3.44"
},
{
"value": "5.31"
},
{
"value": "5.49"
}
]
},
{
"seriesName": "Japan",
"data": [
{
"value": "3.77"
},
{
"value": "6.81"
},
{
"value": "3.79"
},
{
"value": "3.28"
},
{
"value": "10.22"
},
{
"value": "4.22"
},
{
"value": "6.5"
},
{
"value": "2.93"
},
{
"value": "4.7"
},
{
"value": "0.28"
},
{
"value": "1.93"
},
{
"value": "4.13"
},
{
"value": "7.2"
},
{
"value": "3.6"
},
{
"value": "2.53"
},
{
"value": "0.24"
},
{
"value": "0.97"
},
{
"value": "0.41"
},
{
"value": "3.54"
},
{
"value": "4.16"
},
{
"value": "6.04"
},
{
"value": "4.18"
},
{
"value": "3.84"
},
{
"value": "0.06"
},
{
"value": "0.47"
}
]
},
{
"seriesName": " Rest of the world",
"data": [
{
"value": "8.46"
},
{
"value": "0.77"
},
{
"value": "3.31"
},
{
"value": "2.96"
},
{
"value": "1"
},
{
"value": "0.58"
},
{
"value": "2.9"
},
{
"value": "2.85"
},
{
"value": "2.26"
},
{
"value": "0.47"
},
{
"value": "2.75"
},
{
"value": "1.92"
},
{
"value": "0.71"
},
{
"value": "2.15"
},
{
"value": "1.79"
},
{
"value": "1.67"
},
{
"value": "4.14"
},
{
"value": "10.57"
},
{
"value": "0.55"
},
{
"value": "2.05"
},
{
"value": "1.37"
},
{
"value": "0.42"
},
{
"value": "0.46"
},
{
"value": "1.38"
},
{
"value": "1.78"
}
]
}
]
}<chart theme="fusion" numvisibleplot="5" caption="Video games sales breakup" subcaption="Across different markets (In Million USD)" numbersuffix="M" plottooltext="<b>$seriesName</b><hr>$label: <b>$dataValue</b>">
<categories>
<category label="Wii Sports" />
<category label="Super Mario Bros" />
<category label="Mario Kart Wii" />
<category label="Wii Sports Resort" />
<category label="Pokemon Red/Pokemon Blue" />
<category label="Tetris" />
<category label="New Super Mario Bros" />
<category label="Wii Play" />
<category label="New Super Mario Bros. Wii" />
<category label="Duck Hunt" />
<category label="Nintendogs" />
<category label="Mario Kart DS" />
<category label="Pokemon Gold/Pokemon Silver" />
<category label="Wii Fit" />
<category label="Wii Fit Plus" />
<category label="Kinect Adventures" />
<category label="Grand Theft Auto V" />
<category label="Grand Theft Auto: San Andreas" />
<category label="Super Mario World" />
<category label="Brain Age" />
<category label="Pokemon Diamond/Pokemon Pearl" />
<category label="Super Mario Land" />
<category label="Super Mario Bros. 3" />
<category label="Grand Theft Auto V" />
<category label="Grand Theft Auto: Vice City" />
</categories>
<dataset seriesname="North America">
<set value="41.49" />
<set value="29.08" />
<set value="15.85" />
<set value="15.75" />
<set value="11.27" />
<set value="23.2" />
<set value="11.38" />
<set value="14.03" />
<set value="14.59" />
<set value="26.93" />
<set value="9.07" />
<set value="9.81" />
<set value="9" />
<set value="8.94" />
<set value="9.09" />
<set value="14.97" />
<set value="7.01" />
<set value="9.43" />
<set value="12.78" />
<set value="4.75" />
<set value="6.42" />
<set value="10.83" />
<set value="9.54" />
<set value="9.63" />
<set value="8.41" />
</dataset>
<dataset seriesname="Europe ">
<set value="29.02" />
<set value="3.58" />
<set value="12.88" />
<set value="11.01" />
<set value="8.89" />
<set value="2.26" />
<set value="9.23" />
<set value="9.2" />
<set value="7.06" />
<set value="0.63" />
<set value="11" />
<set value="7.57" />
<set value="6.18" />
<set value="8.03" />
<set value="8.59" />
<set value="4.94" />
<set value="9.27" />
<set value="0.4" />
<set value="3.75" />
<set value="9.26" />
<set value="4.52" />
<set value="2.71" />
<set value="3.44" />
<set value="5.31" />
<set value="5.49" />
</dataset>
<dataset seriesname="Japan">
<set value="3.77" />
<set value="6.81" />
<set value="3.79" />
<set value="3.28" />
<set value="10.22" />
<set value="4.22" />
<set value="6.5" />
<set value="2.93" />
<set value="4.7" />
<set value="0.28" />
<set value="1.93" />
<set value="4.13" />
<set value="7.2" />
<set value="3.6" />
<set value="2.53" />
<set value="0.24" />
<set value="0.97" />
<set value="0.41" />
<set value="3.54" />
<set value="4.16" />
<set value="6.04" />
<set value="4.18" />
<set value="3.84" />
<set value="0.06" />
<set value="0.47" />
</dataset>
<dataset seriesname=" Rest of the world">
<set value="8.46" />
<set value="0.77" />
<set value="3.31" />
<set value="2.96" />
<set value="1" />
<set value="0.58" />
<set value="2.9" />
<set value="2.85" />
<set value="2.26" />
<set value="0.47" />
<set value="2.75" />
<set value="1.92" />
<set value="0.71" />
<set value="2.15" />
<set value="1.79" />
<set value="1.67" />
<set value="4.14" />
<set value="10.57" />
<set value="0.55" />
<set value="2.05" />
<set value="1.37" />
<set value="0.42" />
<set value="0.46" />
<set value="1.38" />
<set value="1.78" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollstackedbar2d',
renderAt: 'container',
width: '700',
height: '500',
dataFormat: 'json',
dataSource: {
chart: {
"theme": "fusion",
"numVisiblePlot": "5",
"caption": "Video games sales breakup",
"subcaption": "Across different markets (In Million USD)",
"numbersuffix": "M",
plottooltext: "<b>$seriesName</b><hr>$label: <b>$dataValue</b>"
},
categories: [{
category: [{
"label": "Wii Sports"
},
{
"label": "Super Mario Bros"
},
{
"label": "Mario Kart Wii"
},
{
"label": "Wii Sports Resort"
},
{
"label": "Pokemon Red/Pokemon Blue"
},
{
"label": "Tetris"
},
{
"label": "New Super Mario Bros"
},
{
"label": "Wii Play"
},
{
"label": "New Super Mario Bros. Wii"
},
{
"label": "Duck Hunt"
},
{
"label": "Nintendogs"
},
{
"label": "Mario Kart DS"
},
{
"label": "Pokemon Gold/Pokemon Silver"
},
{
"label": "Wii Fit"
},
{
"label": "Wii Fit Plus"
},
{
"label": "Kinect Adventures"
},
{
"label": "Grand Theft Auto V"
},
{
"label": "Grand Theft Auto: San Andreas"
},
{
"label": "Super Mario World"
},
{
"label": "Brain Age"
},
{
"label": "Pokemon Diamond/Pokemon Pearl"
},
{
"label": "Super Mario Land"
},
{
"label": "Super Mario Bros. 3"
},
{
"label": "Grand Theft Auto V"
},
{
"label": "Grand Theft Auto: Vice City"
}
]
}],
dataSet: [
{
"seriesName": "North America",
"data": [{
"value": "41.49"
},
{
"value": "29.08"
},
{
"value": "15.85"
},
{
"value": "15.75"
},
{
"value": "11.27"
},
{
"value": "23.2"
},
{
"value": "11.38"
},
{
"value": "14.03"
},
{
"value": "14.59"
},
{
"value": "26.93"
},
{
"value": "9.07"
},
{
"value": "9.81"
},
{
"value": "9"
},
{
"value": "8.94"
},
{
"value": "9.09"
},
{
"value": "14.97"
},
{
"value": "7.01"
},
{
"value": "9.43"
},
{
"value": "12.78"
},
{
"value": "4.75"
},
{
"value": "6.42"
},
{
"value": "10.83"
},
{
"value": "9.54"
},
{
"value": "9.63"
},
{
"value": "8.41"
}
]
},
{
"seriesName": "Europe ",
"data": [{
"value": "29.02"
},
{
"value": "3.58"
},
{
"value": "12.88"
},
{
"value": "11.01"
},
{
"value": "8.89"
},
{
"value": "2.26"
},
{
"value": "9.23"
},
{
"value": "9.2"
},
{
"value": "7.06"
},
{
"value": "0.63"
},
{
"value": "11"
},
{
"value": "7.57"
},
{
"value": "6.18"
},
{
"value": "8.03"
},
{
"value": "8.59"
},
{
"value": "4.94"
},
{
"value": "9.27"
},
{
"value": "0.4"
},
{
"value": "3.75"
},
{
"value": "9.26"
},
{
"value": "4.52"
},
{
"value": "2.71"
},
{
"value": "3.44"
},
{
"value": "5.31"
},
{
"value": "5.49"
}
]
},
{
"seriesName": "Japan",
"data": [{
"value": "3.77"
},
{
"value": "6.81"
},
{
"value": "3.79"
},
{
"value": "3.28"
},
{
"value": "10.22"
},
{
"value": "4.22"
},
{
"value": "6.5"
},
{
"value": "2.93"
},
{
"value": "4.7"
},
{
"value": "0.28"
},
{
"value": "1.93"
},
{
"value": "4.13"
},
{
"value": "7.2"
},
{
"value": "3.6"
},
{
"value": "2.53"
},
{
"value": "0.24"
},
{
"value": "0.97"
},
{
"value": "0.41"
},
{
"value": "3.54"
},
{
"value": "4.16"
},
{
"value": "6.04"
},
{
"value": "4.18"
},
{
"value": "3.84"
},
{
"value": "0.06"
},
{
"value": "0.47"
}
]
},
{
"seriesName": " Rest of the world",
"data": [{
"value": "8.46"
},
{
"value": "0.77"
},
{
"value": "3.31"
},
{
"value": "2.96"
},
{
"value": "1"
},
{
"value": "0.58"
},
{
"value": "2.9"
},
{
"value": "2.85"
},
{
"value": "2.26"
},
{
"value": "0.47"
},
{
"value": "2.75"
},
{
"value": "1.92"
},
{
"value": "0.71"
},
{
"value": "2.15"
},
{
"value": "1.79"
},
{
"value": "1.67"
},
{
"value": "4.14"
},
{
"value": "10.57"
},
{
"value": "0.55"
},
{
"value": "2.05"
},
{
"value": "1.37"
},
{
"value": "0.42"
},
{
"value": "0.46"
},
{
"value": "1.38"
},
{
"value": "1.78"
}
]
},
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above 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" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset seriesname="Actual Revenue">
<set value="16000" />
<set value="20000" />
<set value="18000" />
<set value="19000" />
<set value="15000" />
<set value="21000" />
<set value="16000" />
<set value="20000" />
<set value="17000" />
<set value="25000" />
<set value="19000" />
<set value="23000" />
<set value="22000" />
<set value="25000" />
<set value="21000" />
<set value="23000" />
<set value="27000" />
<set value="26000" />
<set value="24000" />
<set value="28000" />
<set value="26000" />
<set value="27000" />
<set value="29000" />
<set value="26000" />
</dataset>
<dataset seriesname="Projected Revenue" renderas="line" showvalues="0">
<set value="15000" />
<set value="16000" />
<set value="17000" />
<set value="18000" />
<set value="19000" />
<set value="19000" />
<set value="19000" />
<set value="19000" />
<set value="20000" />
<set value="21000" />
<set value="22000" />
<set value="23000" />
<set value="24000" />
<set value="22000" />
<set value="23000" />
<set value="25000" />
<set value="22000" />
<set value="20000" />
<set value="24000" />
<set value="25000" />
<set value="27000" />
<set value="24000" />
<set value="23000" />
<set value="25000" />
</dataset>
<dataset seriesname="Profit" renderas="area" showvalues="0">
<set value="4000" />
<set value="5000" />
<set value="3000" />
<set value="4000" />
<set value="1000" />
<set value="7000" />
<set value="1000" />
<set value="4000" />
<set value="1000" />
<set value="8000" />
<set value="2000" />
<set value="7000" />
<set value="6000" />
<set value="5000" />
<set value="7000" />
<set value="8000" />
<set value="8000" />
<set value="9000" />
<set value="7000" />
<set value="10000" />
<set value="9000" />
<set value="7000" />
<set value="8000" />
<set value="11000" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollcombi2d',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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 scroll 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 2018-FY 2019.
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": "(2018 to 2019)",
"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="(2018 to 2019)" 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" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset seriesname="Revenues">
<set value="16000" />
<set value="20000" />
<set value="18000" />
<set value="19000" />
<set value="15000" />
<set value="21000" />
<set value="16000" />
<set value="20000" />
<set value="17000" />
<set value="22000" />
<set value="19000" />
<set value="23000" />
<set value="24000" />
<set value="25000" />
<set value="26000" />
<set value="24000" />
<set value="19000" />
<set value="22000" />
<set value="18000" />
<set value="19000" />
<set value="22000" />
<set value="21000" />
<set value="23000" />
<set value="24000" />
</dataset>
<dataset seriesname="Profits" renderas="area" showvalues="0">
<set value="4000" />
<set value="5000" />
<set value="3000" />
<set value="4000" />
<set value="1000" />
<set value="7000" />
<set value="1000" />
<set value="4000" />
<set value="1000" />
<set value="8000" />
<set value="2000" />
<set value="7000" />
<set value="6000" />
<set value="7000" />
<set value="4000" />
<set value="5000" />
<set value="3000" />
<set value="9000" />
<set value="2000" />
<set value="6000" />
<set value="2000" />
<set value="7000" />
<set value="4000" />
<set value="6000" />
</dataset>
<dataset seriesname="Profit %" parentyaxis="S" renderas="line" showvalues="0">
<set value="25" />
<set value="25" />
<set value="16.66" />
<set value="21.05" />
<set value="6.66" />
<set value="33.33" />
<set value="6.25" />
<set value="25" />
<set value="5.88" />
<set value="36.36" />
<set value="10.52" />
<set value="30.43" />
<set value="25" />
<set value="28" />
<set value="15.38" />
<set value="20.83" />
<set value="15.79" />
<set value="40.91" />
<set value="11.11" />
<set value="31.58" />
<set value="9.09" />
<set value="33.33" />
<set value="17.39" />
<set value="25" />
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollcombidy2d',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Revenues and Profits",
"subCaption": "(2018 to 2019)",
"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"
}
]
}
]
}
});
chartObj.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.
Scroll Multi-series Stacked Column 2D
Let's create a scrollable multi-series stacked column 2D by setting the value of the type attribute to scrollMSStackedColumn2D.
For the detailed list of attributes, refer to the chart attributes page of scroll multi-series stacked column 2D chart.
The scroll multi-series stacked column 2D chart thus looks like as shown below:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"numVisiblePlot": "5",
"caption": "Avocado sales among different states",
"subcaption": "2015-2017",
"plottooltext": "<b>$seriesName</b><hr>$label: <b>$dataValue</b>",
"xaxisname": "Quarter",
"yaxisname": "Sales (In USD)"
},
"categories": [
{
"category": [
{
"label": "2015-Q1"
},
{
"label": "2015-Q2"
},
{
"label": "2015-Q3"
},
{
"label": "2015-Q4"
},
{
"label": "2016-Q1"
},
{
"label": "2016-Q2"
},
{
"label": "2016-Q3"
},
{
"label": "2016-Q4"
},
{
"label": "2017-Q1"
},
{
"label": "2017-Q2"
},
{
"label": "2017-Q3"
},
{
"label": "2017-Q4"
}
]
}
],
"dataset": [
{
"dataset": [
{
"seriesname": "New York",
"data": [
{
"value": "510344.4"
},
{
"value": "825541.86"
},
{
"value": "1078603.31"
},
{
"value": "895751.26"
},
{
"value": "1213115.71"
},
{
"value": "1207901.26"
},
{
"value": "1163397.45"
},
{
"value": "841621.26"
},
{
"value": "1245085.8"
},
{
"value": "1103347.9"
},
{
"value": "1022076.68"
},
{
"value": "1025565.8"
}
]
},
{
"seriesname": "Georgia",
"data": [
{
"value": "5318642.2"
},
{
"value": "5701956"
},
{
"value": "5095298.61"
},
{
"value": "4118810.44"
},
{
"value": "5240363.94"
},
{
"value": "5212220.71"
},
{
"value": "4522632.08"
},
{
"value": "3374924.99"
},
{
"value": "4764169.41"
},
{
"value": "4424022.98"
},
{
"value": "3989718.21"
},
{
"value": "3970043.21"
}
]
}
]
},
{
"dataset": [
{
"seriesname": "Maryland",
"data": [
{
"value": "7524659.79"
},
{
"value": "8196424.21"
},
{
"value": "8325170.33"
},
{
"value": "7111010.55"
},
{
"value": "8694218.26"
},
{
"value": "8895865.95"
},
{
"value": "7244663.98"
},
{
"value": "5703274.8"
},
{
"value": "8419998.48"
},
{
"value": "7388812.3"
},
{
"value": "6517872.07"
},
{
"value": "7064818.95"
}
]
},
{
"seriesname": "Idaho",
"data": [
{
"value": "887124.05"
},
{
"value": "993801.32"
},
{
"value": "803841.86"
},
{
"value": "581555.6"
},
{
"value": "696292.47"
},
{
"value": "577209.67"
},
{
"value": "563216.54"
},
{
"value": "520417.15"
},
{
"value": "688505.86"
},
{
"value": "718619.31"
},
{
"value": "630249.87"
},
{
"value": "628688"
}
]
},
{
"seriesname": "Massachusetts",
"data": [
{
"value": "4441861.75"
},
{
"value": "5404269.51"
},
{
"value": "6223966.11"
},
{
"value": "5626179.46"
},
{
"value": "6722592.97"
},
{
"value": "6931022.03"
},
{
"value": "5220110.38"
},
{
"value": "4765293.29"
},
{
"value": "6584454.42"
},
{
"value": "5961664.26"
},
{
"value": "5567418.89"
},
{
"value": "5466678.99"
}
]
}
]
}
]
}<chart theme="fusion" numvisibleplot="5" caption="Avocado sales among different states" subcaption="2015-2017" plottooltext="<b>$seriesName</b><hr>$label: <b>$dataValue</b>" xaxisname="Quarter" yaxisname="Sales (In USD)">
<categories>
<category label="2015-Q1" />
<category label="2015-Q2" />
<category label="2015-Q3" />
<category label="2015-Q4" />
<category label="2016-Q1" />
<category label="2016-Q2" />
<category label="2016-Q3" />
<category label="2016-Q4" />
<category label="2017-Q1" />
<category label="2017-Q2" />
<category label="2017-Q3" />
<category label="2017-Q4" />
</categories>
<dataset>
<dataset seriesname="New York">
<set value="510344.4" />
<set value="825541.86" />
<set value="1078603.31" />
<set value="895751.26" />
<set value="1213115.71" />
<set value="1207901.26" />
<set value="1163397.45" />
<set value="841621.26" />
<set value="1245085.8" />
<set value="1103347.9" />
<set value="1022076.68" />
<set value="1025565.8" />
</dataset>
<dataset seriesname="Georgia">
<set value="5318642.2" />
<set value="5701956" />
<set value="5095298.61" />
<set value="4118810.44" />
<set value="5240363.94" />
<set value="5212220.71" />
<set value="4522632.08" />
<set value="3374924.99" />
<set value="4764169.41" />
<set value="4424022.98" />
<set value="3989718.21" />
<set value="3970043.21" />
</dataset>
</dataset>
<dataset>
<dataset seriesname="Maryland">
<set value="7524659.79" />
<set value="8196424.21" />
<set value="8325170.33" />
<set value="7111010.55" />
<set value="8694218.26" />
<set value="8895865.95" />
<set value="7244663.98" />
<set value="5703274.8" />
<set value="8419998.48" />
<set value="7388812.3" />
<set value="6517872.07" />
<set value="7064818.95" />
</dataset>
<dataset seriesname="Idaho">
<set value="887124.05" />
<set value="993801.32" />
<set value="803841.86" />
<set value="581555.6" />
<set value="696292.47" />
<set value="577209.67" />
<set value="563216.54" />
<set value="520417.15" />
<set value="688505.86" />
<set value="718619.31" />
<set value="630249.87" />
<set value="628688" />
</dataset>
<dataset seriesname="Massachusetts">
<set value="4441861.75" />
<set value="5404269.51" />
<set value="6223966.11" />
<set value="5626179.46" />
<set value="6722592.97" />
<set value="6931022.03" />
<set value="5220110.38" />
<set value="4765293.29" />
<set value="6584454.42" />
<set value="5961664.26" />
<set value="5567418.89" />
<set value="5466678.99" />
</dataset>
</dataset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollmsstackedcolumn2d',
renderAt: 'container',
width: '550',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"numVisiblePlot": "5",
"caption": "Avocado sales among different states",
"subcaption": "2015-2017",
"plottooltext": "<b>$seriesName</b><hr>$label: <b>$dataValue</b>",
"xaxisname": "Quarter",
"yaxisname": "Sales (In USD)",
},
"categories": [{
"category": [{
"label": "2015-Q1"
},
{
"label": "2015-Q2"
},
{
"label": "2015-Q3"
},
{
"label": "2015-Q4"
},
{
"label": "2016-Q1"
},
{
"label": "2016-Q2"
},
{
"label": "2016-Q3"
},
{
"label": "2016-Q4"
},
{
"label": "2017-Q1"
},
{
"label": "2017-Q2"
},
{
"label": "2017-Q3"
},
{
"label": "2017-Q4"
}
]
}],
"dataset": [{
"dataset": [{
"seriesname": "New York",
"data": [{
"value": "510344.4"
},
{
"value": "825541.86"
},
{
"value": "1078603.31"
},
{
"value": "895751.26"
},
{
"value": "1213115.71"
},
{
"value": "1207901.26"
},
{
"value": "1163397.45"
},
{
"value": "841621.26"
},
{
"value": "1245085.8"
},
{
"value": "1103347.9"
},
{
"value": "1022076.68"
},
{
"value": "1025565.8"
}
]
},
{
"seriesname": "Georgia",
"data": [{
"value": "5318642.2"
},
{
"value": "5701956"
},
{
"value": "5095298.61"
},
{
"value": "4118810.44"
},
{
"value": "5240363.94"
},
{
"value": "5212220.71"
},
{
"value": "4522632.08"
},
{
"value": "3374924.99"
},
{
"value": "4764169.41"
},
{
"value": "4424022.98"
},
{
"value": "3989718.21"
},
{
"value": "3970043.21"
}
]
}
]
},
{
"dataset": [{
"seriesname": "Maryland",
"data": [{
"value": "7524659.79"
},
{
"value": "8196424.21"
},
{
"value": "8325170.33"
},
{
"value": "7111010.55"
},
{
"value": "8694218.26"
},
{
"value": "8895865.95"
},
{
"value": "7244663.98"
},
{
"value": "5703274.8"
},
{
"value": "8419998.48"
},
{
"value": "7388812.3"
},
{
"value": "6517872.07"
},
{
"value": "7064818.95"
},
]
},
{
"seriesname": "Idaho",
"data": [{
"value": "887124.05"
},
{
"value": "993801.32"
},
{
"value": "803841.86"
},
{
"value": "581555.6"
},
{
"value": "696292.47"
},
{
"value": "577209.67"
},
{
"value": "563216.54"
},
{
"value": "520417.15"
},
{
"value": "688505.86"
},
{
"value": "718619.31"
},
{
"value": "630249.87"
},
{
"value": "628688"
},
]
},
{
"seriesname": "Massachusetts",
"data": [{
"value": "4441861.75"
},
{
"value": "5404269.51"
},
{
"value": "6223966.11"
},
{
"value": "5626179.46"
},
{
"value": "6722592.97"
},
{
"value": "6931022.03"
},
{
"value": "5220110.38"
},
{
"value": "4765293.29"
},
{
"value": "6584454.42"
},
{
"value": "5961664.26"
},
{
"value": "5567418.89"
},
{
"value": "5466678.99"
}
]
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above chart.
Scroll Multi-series Stacked Column 2D + Line Dual Y-Axis Chart
Let's create a scrollable multi-series stacked column 2D scroller plot and line chart with dual y-axis. Create the chart by setting the value of the type attribute to scrollMSStackedColumn2DLineDy.
For the detailed list of attributes, refer to the chart attributes page of scroll multi-series stacked column 2D + line dual y-axis chart.
The scroll multi-series stacked column 2D + line dual y-axis chart thus looks like as shown below:
FusionCharts will load here..
{
"chart": {
"caption": "Market Share of Korean Automobile Manufacturers in US",
"subcaption": "2005 - 2019",
"pyaxisname": "Units Sold",
"syaxisname": "% of total market share",
"snumbersuffix": "%",
"syaxismaxvalue": "25",
"theme": "fusion",
"showvalues": "0",
"drawcrossline": "1",
"divlinealpha": "20"
},
"categories": [
{
"category": [
{
"label": "2005"
},
{
"label": "2006"
},
{
"label": "2007"
},
{
"label": "2008"
},
{
"label": "2009"
},
{
"label": "2010"
},
{
"label": "2011"
},
{
"label": "2012"
},
{
"label": "2013"
},
{
"label": "2014"
},
{
"label": "2015"
},
{
"label": "2016"
},
{
"label": "2017"
},
{
"label": "2018"
},
{
"label": "2019"
}
]
}
],
"dataset": [
{
"dataset": [
{
"seriesname": "Honda City",
"data": [
{
"value": "997281"
},
{
"value": "1063599"
},
{
"value": "1063964"
},
{
"value": "1152123"
},
{
"value": "1289128"
},
{
"value": "1394972"
},
{
"value": "1331194"
},
{
"value": "1047958"
},
{
"value": "974751"
},
{
"value": "983243"
},
{
"value": "1294208"
},
{
"value": "1435345"
},
{
"value": "1217785"
},
{
"value": "1163621"
},
{
"value": "1161561"
}
]
},
{
"seriesname": "Honda Civic",
"data": [
{
"value": "196354"
},
{
"value": "259493"
},
{
"value": "234755"
},
{
"value": "205717"
},
{
"value": "205081"
},
{
"value": "224978"
},
{
"value": "1277225"
},
{
"value": "1132872"
},
{
"value": "852656"
},
{
"value": "1234768"
},
{
"value": "205081"
},
{
"value": "1027759"
},
{
"value": "1141363"
},
{
"value": "1277225"
},
{
"value": "1285716"
}
]
}
]
},
{
"dataset": [
{
"seriesname": "Hyundai Verna",
"data": [
{
"value": "373709"
},
{
"value": "391276"
},
{
"value": "380002"
},
{
"value": "411456"
},
{
"value": "476001"
},
{
"value": "500537"
},
{
"value": "413815"
},
{
"value": "496356"
},
{
"value": "514865"
},
{
"value": "697118"
},
{
"value": "567824"
},
{
"value": "525457"
},
{
"value": "576222"
},
{
"value": "484427"
},
{
"value": "491488"
}
]
},
{
"seriesname": "Hyundai Sonata",
"data": [
{
"value": "47548"
},
{
"value": "73130"
},
{
"value": "107659"
},
{
"value": "179783"
},
{
"value": "202390"
},
{
"value": "156107"
},
{
"value": "88315"
},
{
"value": "103964"
},
{
"value": "191982"
},
{
"value": "120271"
},
{
"value": "125909"
},
{
"value": "138739"
},
{
"value": "179152"
},
{
"value": "131125"
},
{
"value": "181549"
}
]
}
]
}
],
"lineset": [
{
"seriesname": "Market Share %",
"plottooltext": "Total market share of Korean cars in $label is <b>$dataValue</b> in US",
"showvalues": "0",
"data": [
{
"value": "17.74"
},
{
"value": "19.23"
},
{
"value": "15.43"
},
{
"value": "12.34"
},
{
"value": "15.34"
},
{
"value": "21.17"
},
{
"value": "13.14"
},
{
"value": "18.13"
},
{
"value": "13.13"
},
{
"value": "15.34"
},
{
"value": "14.74"
},
{
"value": "18.17"
},
{
"value": "19.22"
},
{
"value": "17.74"
},
{
"value": "20.17"
}
]
}
]
}<chart caption="Market Share of Korean Automobile Manufacturers in US" subcaption="2005 - 2019" pyaxisname="Units Sold" syaxisname="% of total market share" snumbersuffix="%" syaxismaxvalue="25" theme="fusion" showvalues="0" drawcrossline="1" divlinealpha="20">
<categories>
<category label="2005" />
<category label="2006" />
<category label="2007" />
<category label="2008" />
<category label="2009" />
<category label="2010" />
<category label="2011" />
<category label="2012" />
<category label="2013" />
<category label="2014" />
<category label="2015" />
<category label="2016" />
<category label="2017" />
<category label="2018" />
<category label="2019" />
</categories>
<dataset>
<dataset seriesname="Honda City">
<set value="997281" />
<set value="1063599" />
<set value="1063964" />
<set value="1152123" />
<set value="1289128" />
<set value="1394972" />
<set value="1331194" />
<set value="1047958" />
<set value="974751" />
<set value="983243" />
<set value="1294208" />
<set value="1435345" />
<set value="1217785" />
<set value="1163621" />
<set value="1161561" />
</dataset>
<dataset seriesname="Honda Civic">
<set value="196354" />
<set value="259493" />
<set value="234755" />
<set value="205717" />
<set value="205081" />
<set value="224978" />
<set value="1277225" />
<set value="1132872" />
<set value="852656" />
<set value="1234768" />
<set value="205081" />
<set value="1027759" />
<set value="1141363" />
<set value="1277225" />
<set value="1285716" />
</dataset>
</dataset>
<dataset>
<dataset seriesname="Hyundai Verna">
<set value="373709" />
<set value="391276" />
<set value="380002" />
<set value="411456" />
<set value="476001" />
<set value="500537" />
<set value="413815" />
<set value="496356" />
<set value="514865" />
<set value="697118" />
<set value="567824" />
<set value="525457" />
<set value="576222" />
<set value="484427" />
<set value="491488" />
</dataset>
<dataset seriesname="Hyundai Sonata">
<set value="47548" />
<set value="73130" />
<set value="107659" />
<set value="179783" />
<set value="202390" />
<set value="156107" />
<set value="88315" />
<set value="103964" />
<set value="191982" />
<set value="120271" />
<set value="125909" />
<set value="138739" />
<set value="179152" />
<set value="131125" />
<set value="181549" />
</dataset>
</dataset>
<lineset seriesname="Market Share %" plottooltext="Total market share of Korean cars in $label is <b>$dataValue</b> in US" showvalues="0">
<set value="17.74" />
<set value="19.23" />
<set value="15.43" />
<set value="12.34" />
<set value="15.34" />
<set value="21.17" />
<set value="13.14" />
<set value="18.13" />
<set value="13.13" />
<set value="15.34" />
<set value="14.74" />
<set value="18.17" />
<set value="19.22" />
<set value="17.74" />
<set value="20.17" />
</lineset>
</chart><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 chartObj = new FusionCharts({
type: 'scrollmsstackedcolumn2dlinedy',
renderAt: 'container',
width: '600',
height: '450',
dataFormat: 'json',
dataSource: {
chart: {
caption: "Market Share of Korean Automobile Manufacturers in US",
subcaption: "2005 - 2019",
pyaxisname: "Units Sold",
syaxisname: "% of total market share",
snumbersuffix: "%",
syaxismaxvalue: "25",
theme: "fusion",
showvalues: "0",
drawcrossline: "1",
divlinealpha: "20"
},
categories: [{
category: [{
label: "2005"
},
{
label: "2006"
},
{
label: "2007"
},
{
label: "2008"
},
{
label: "2009"
},
{
label: "2010"
},
{
label: "2011"
},
{
label: "2012"
},
{
label: "2013"
},
{
label: "2014"
},
{
label: "2015"
},
{
label: "2016"
},
{
label: "2017"
},
{
label: "2018"
},
{
label: "2019"
},
]
}],
dataset: [{
dataset: [{
seriesname: "Honda City",
data: [{
value: "997281"
},
{
value: "1063599"
},
{
value: "1063964"
},
{
value: "1152123"
},
{
value: "1289128"
},
{
value: "1394972"
},
{
value: "1331194"
},
{
value: "1047958"
},
{
value: "974751"
},
{
value: "983243"
},
{
value: "1294208"
},
{
value: "1435345"
},
{
value: "1217785"
},
{
value: "1163621"
},
{
value: "1161561"
},
]
},
{
seriesname: "Honda Civic",
data: [{
value: "196354"
},
{
value: "259493"
},
{
value: "234755"
},
{
value: "205717"
},
{
value: "205081"
},
{
value: "224978"
},
{
value: "1277225"
},
{
value: "1132872"
},
{
value: "852656"
},
{
value: "1234768"
},
{
value: "205081"
},
{
value: "1027759"
},
{
value: "1141363"
},
{
value: "1277225"
},
{
value: "1285716"
}
]
}
]
},
{
dataset: [{
seriesname: "Hyundai Verna",
data: [{
value: "373709"
},
{
value: "391276"
},
{
value: "380002"
},
{
value: "411456"
},
{
value: "476001"
},
{
value: "500537"
},
{
value: "413815"
},
{
value: "496356"
},
{
value: "514865"
},
{
value: "697118"
},
{
value: "567824"
},
{
value: "525457"
},
{
value: "576222"
},
{
value: "484427"
},
{
value: "491488"
}
]
},
{
seriesname: "Hyundai Sonata",
data: [{
value: "47548"
},
{
value: "73130"
},
{
value: "107659"
},
{
value: "179783"
},
{
value: "202390"
},
{
value: "156107"
},
{
value: "88315"
},
{
value: "103964"
},
{
value: "191982"
},
{
value: "120271"
},
{
value: "125909"
},
{
value: "138739"
},
{
value: "179152"
},
{
value: "131125"
},
{
value: "181549"
}
]
}
]
}
],
lineset: [{
seriesname: "Market Share %",
plottooltext: "Total market share of Korean cars in $label is <b>$dataValue</b> in US",
showvalues: "0",
data: [{
value: "17.74"
},
{
value: "19.23"
},
{
value: "15.43"
},
{
value: "12.34"
},
{
value: "15.34"
},
{
value: "21.17"
},
{
value: "13.14"
},
{
value: "18.13"
},
{
value: "13.13"
},
{
value: "15.34"
},
{
value: "14.74"
},
{
value: "18.17"
},
{
value: "19.22"
},
{
value: "17.74"
},
{
value: "20.17"
}
]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above chart.
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 scroller plot 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
scrollColorattribute.Specify the height of the scroll bar using the
scrollHeightattribute.Set the distance of the scroll bar from the canvas using the
scrollPaddingattribute.
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.
Position Scroll Bar
FusionCharts XT suite now allows you to decouple the scrollbar from the X-axis. Earlier, the scrollbar was always coupled with the X-axis. Now, a new attribute scrollPosition has been introduced, which lets you position the scrollbar irrespective of the position of X-axis.
In charts where the X-axis is located at the bottom or the top (as in a column chart), you can set the value of the
scrollPositionattribute totoporbottom.In charts where the X-axis is located to the left or the right (as in a bar chart), you can set the value of the
scrollPositionattribute toleftorright.
Refer to the code below:
{
"chart": {
"scrollPosition": "top"
}
}The column 2D scroll chart will look as shown below:
FusionCharts will load here..
Click here to edit the above chart.
Looking to leverage scroll charts? FusionCharts Suite XT is here to help
Get started with FusionCharts Suite XT today and unlock the power of scroller plot to present your data clearly and concisely. Elevate your charts to the next level and make informed decisions with FusionCharts. Try it now!
Elevate your data with FusionCharts Suite XT's scroll chart – simplify complexity, make smarter decisions!
FAQs
Can the number of visible data plots in a scroll chart be configured?
Yes, FusionCharts allows users to configure the number of visible data plots in a scroll chart using the numVisiblePlot attribute. This feature lets users control the amount of data displayed initially, improving the chart's readability.
Can I integrate scroll charts with other features of FusionCharts, such as drill-downs and annotations?
Yes, FusionCharts supports the integration of scroll charts with various advanced features, including drill-downs, annotations, and real-time updates. This enables users to create interactive and informative charts that provide deeper insights into their data.
Are there any performance considerations when using scroll charts with large datasets?
While scroll charts can effectively handle large datasets, users should be mindful of potential performance implications, especially when rendering charts with thousands or millions of data points. Optimizations such as data aggregation and lazy loading can help mitigate performance issues.
How can I get started with creating scroll charts using FusionCharts?
Getting started with scroll charts in FusionCharts is easy! Simply sign up for a FusionCharts account, download the library, and follow the comprehensive documentation and tutorials to create scroll charts tailored to your data visualization needs.