I have been using fusion charts for many applications. Recently I used msstackedcolumn2d chart and I am trying to get horizontal scrollbar for my chart. Can anyone tell me how to get scrollbar in msstackedcolumn2d chart ?
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'msstackedcolumn2d',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Request Report",
"xaxisname": "Month",
"yaxisname": "No. of Request",
"paletteColors": "#0075c2,#45AFF5,#2C8A56,#1aaf5d,#50DE90",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"showPercentValues": "1",
"showPercentInToolTip": "0",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"categories": [
{
"category": [
{
"label": "jan"
},
{
"label": "feb"
},
{
"label": "mar"
},
{
"label": "apr"
},
{
"label": "may"
},
{
"label": "june"
},
{
"label": "july"
},
{
"label": "aug"
},
{
"label": "sep"
},
{
"label": "oct"
},
{
"label": "nov"
},
{
"label": "dec"
}
]
}
],
"dataset": [
{
"dataset": [
{
"seriesname": "Req_Total",
"data": [
{
"value": "8000"
},
{
"value": "600"
},
{
"value": "100"
},
{
"value": "400"
},
{
"value": "200"
},
{
"value": "200"
},
{
"value": "100"
},
{
"value": "2000"
},
{
"value": "300"
},
{
"value": "700"
},
{
"value": "400"
},
{
"value": "500"
}
]
},
{
"seriesname": "Req_Success",
"data": [
{
"value": "600"
},
{
"value": "500"
},
{
"value": "200"
},
{
"value": "300"
},
{
"value": "100"
},
{
"value": "8000"
},
{
"value": "200"
},
{
"value": "100"
},
{
"value": "2000"
},
{
"value": "200"
},
{
"value": "900"
},
{
"value": "400"
}
]
},
{
"seriesname": "Req_Fail",
"data": [
{
"value": "500"
},
{
"value": "400"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "200"
},
{
"value": "600"
},
{
"value": "2000"
},
{
"value": "200"
},
{
"value": "100"
},
{
"value": "300"
},
{
"value": "1000"
},
{
"value": "300"
}
]
}
]
},
{
"dataset": [
{
"seriesname": "Status",
"data": [
{
"value": "500"
},
{
"value": "400"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "200"
},
{
"value": "600"
},
{
"value": "10000"
},
{
"value": "5000"
},
{
"value": "100"
},
{
"value": "200"
},
{
"value": "100"
},
{
"value": "300"
}
]
}
]
},
{
"dataset": [
{
"seriesname": "Downloaded",
"data": [
{
"value": "600"
},
{
"value": "500"
},
{
"value": "200"
},
{
"value": "300"
},
{
"value": "100"
},
{
"value": "8000"
},
{
"value": "5000"
},
{
"value": "100"
},
{
"value": "2000"
},
{
"value": "100"
},
{
"value": "200"
},
{
"value": "400"
}
]
}
]
}
]
}
});
revenueChart.render();
});
I have also created jsfiddle
