Combination Charts
These chart types belong to FusionCharts XT.
Combination charts are similar to multi-series charts. They allow you to plot multiple datasets on the same chart. But an added advantage of using combination charts is that you can also plot multiple chart types on the same chart. For example, you can show the column, line, and area chart on the same chart canvas.
Combination charts can be rendered in either 2D or 3D, can have single or dual y-axes, and can be stacked or multi series in nature.
The combination charts available in the FusionCharts Suite XT are:
2D Single Y-axis Combination Chart
3D Single Y-axis Combination Chart
2D Dual Y-axis Combination Chart
Column 3D + Line Single Y-axis Chart
Column 3D + Line Dual Y-axis Chart
Stacked Column 2D Line Single Y-axis Chart
Stacked Column 3D Line Single Y-axis Chart
Stacked Column 3D Line Dual Y-axis Chart
Multi Series Stacked Column 2D + Line Dual Y-axis Chart
2D Single Y-axis Combination Chart
Let's create our first combination chart to showcase the comparison of actual revenue, projected revenue and the profit earned for each month of the last year. All three metrics have been plotted using different chart types - the actual revenue earned is plotted using a column chart, the projected revenue is plotted using a line chart, and the profit earned is plotted using an area chart.
To create a single y-axis combination chart in 2D follow the steps 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 multi-series combination chart, setmscombi2D.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 single y-axis combination chart.
A 2D combination chart with a single y-axis looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Sales analysis of last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Actual Revenue",
"showValues": "1",
"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"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"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"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"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"
}
]
}
]
}<chart caption="Harry's SuperMart" subcaption="Sales analysis of last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" divlinecolor="#999999" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5" theme="fusion">
<categories>
<category label="Jan" />
<category label="Feb" />
<category label="Mar" />
<category label="Apr" />
<category label="May" />
<category label="Jun" />
<category label="Jul" />
<category label="Aug" />
<category label="Sep" />
<category label="Oct" />
<category label="Nov" />
<category label="Dec" />
</categories>
<dataset seriesname="Actual Revenue" showvalues="1">
<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" />
</dataset>
<dataset seriesname="Projected Revenue" renderas="line">
<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" />
</dataset>
<dataset seriesname="Profit" renderas="area">
<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" />
</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: 'mscombi2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Sales analysis of last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}],
"dataset": [{
"seriesName": "Actual Revenue",
"showValues": "1",
"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"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"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"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"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"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the single y combination chart in 2D.
3D Single Y-axis Combination Chart
To render a single y-axis combination chart in 3D, change the value of the type attribute from mscombi2d to mscombi3d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of 3D single y-axis combination chart.
A single y-axis combination chart in 3D looks like:
FusionCharts will load here..
{
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Sales analysis of last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Actual Revenue",
"showValues": "1",
"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"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"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"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"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"
}
]
}
]
}<chart caption="Harry's SuperMart" subcaption="Sales analysis of last year" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" divlinecolor="#999999" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5" theme="fusion">
<categories>
<category label="Jan" />
<category label="Feb" />
<category label="Mar" />
<category label="Apr" />
<category label="May" />
<category label="Jun" />
<category label="Jul" />
<category label="Aug" />
<category label="Sep" />
<category label="Oct" />
<category label="Nov" />
<category label="Dec" />
</categories>
<dataset seriesname="Actual Revenue" showvalues="1">
<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" />
</dataset>
<dataset seriesname="Projected Revenue" renderas="line">
<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" />
</dataset>
<dataset seriesname="Profit" renderas="area">
<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" />
</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: 'mscombi3d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Sales analysis of last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}],
"dataset": [{
"seriesName": "Actual Revenue",
"showValues": "1",
"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"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"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"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"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"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the single y combination chart in 3D.
2D Dual Y-axis Combination Chart
Now, let's create a dual y-axis combination chart in 2D. For this, change the value of the type attribute from mscombi2d to mscombidy2d.
In this chart, we will show a comparison between the revenue, profit, and the profit percentage. The revenue and the profit will be shown as the amount in dollars, but the profit percentage will require a different unit - percentage. These cannot be plotted on a single y-axis. FusionCharts Suite XT allows you to have two y-axes, a primary y-axis, and a secondary y-axis if you have two data of two different numeric units to plot.
Therefore, we've plotted the amount in USD on the primary y-axis (the one on the left) and the profit % on the secondary y-axis (the one on the right).
For a detailed list of attributes, refer to the chart attributes page of 2D dual y-axis combination chart.
A 2D combination chart with dual y-axis looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"usePlotGradientColor": "0",
"anchorRadius": "3",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"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"
}
]
},
{
"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"
}
]
},
{
"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"
}
]
}
]
}<chart caption="Revenues and Profits" subcaption="For last year" xaxisname="Month" pyaxisname="Amount (In USD)" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="50" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" useplotgradientcolor="0" anchorradius="3" theme="fusion">
<categories>
<category label="Jan" />
<category label="Feb" />
<category label="Mar" />
<category label="Apr" />
<category label="May" />
<category label="Jun" />
<category label="Jul" />
<category label="Aug" />
<category label="Sep" />
<category label="Oct" />
<category label="Nov" />
<category label="Dec" />
</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" />
</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" />
</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" />
</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: 'mscombidy2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
//Cosmetics
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"usePlotGradientColor": "0",
"anchorRadius": "3",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}],
"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"
}
]
},
{
"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"
}
]
},
{
"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"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the dual y-axis combination chart in 2D.
You can also build the above combination chart using Spline and Spline Area. To define any one of the dataset to spline or spline area, set the renderAs attribute to spline or splineArea respectively.
In the above sample, let's plot the Profit % in spline and Profit in splineArea. With these changes, the chart looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"usePlotGradientColor": "0",
"anchorRadius": "3",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"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"
}
]
},
{
"seriesName": "Profits",
"renderAs": "splinearea",
"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"
}
]
},
{
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "spline",
"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"
}
]
}
]
}<chart caption="Revenues and Profits" subcaption="For last year" xaxisname="Month" pyaxisname="Amount (In USD)" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="50" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" useplotgradientcolor="0" anchorradius="3" theme="fusion">
<categories>
<category label="Jan" />
<category label="Feb" />
<category label="Mar" />
<category label="Apr" />
<category label="May" />
<category label="Jun" />
<category label="Jul" />
<category label="Aug" />
<category label="Sep" />
<category label="Oct" />
<category label="Nov" />
<category label="Dec" />
</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" />
</dataset>
<dataset seriesname="Profits" renderas="splinearea" 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" />
</dataset>
<dataset seriesname="Profit %" parentyaxis="S" renderas="spline" 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" />
</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: 'mscombidy2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
//Cosmetics
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"usePlotGradientColor": "0",
"anchorRadius": "3",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}],
"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"
}
]
},
{
"seriesName": "Profits",
"renderAs": "splinearea",
"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"
}
]
},
{
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "spline",
"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"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the dual y-axis combination chart with spline and splineArea as data plots.
Column 3D + Line Single Y-axis Chart
Now, let's create a column and line multi-series chart in 3D. For this, set the value of the type attribute to mscolumnline3d.
For a detailed list of attributes, refer to the chart attributes page of column 3D + line single y-axis chart.
The following chart will showcase the comparsion between the fixed cost, variable cost and the budgeted cost for a year. The fixed cost and the variable cost will be shown in column and the budgeted cost will be shown by a line.
The above multi-series series chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Cost Analysis",
"numberprefix": "$",
"xaxisname": "Quarters",
"yaxisname": "Cost"
},
"categories": [
{
"category": [
{
"label": "Quarter 1"
},
{
"label": "Quarter 2"
},
{
"label": "Quarter 3"
},
{
"label": "Quarter 4"
}
]
}
],
"dataset": [
{
"seriesname": "Fixed Cost",
"data": [
{
"value": "235000"
},
{
"value": "225100"
},
{
"value": "222000"
},
{
"value": "230500"
}
]
},
{
"seriesname": "Variable Cost",
"data": [
{
"value": "230000"
},
{
"value": "143000"
},
{
"value": "198000"
},
{
"value": "327600"
}
]
},
{
"seriesname": "Budgeted cost",
"renderas": "Line",
"data": [
{
"value": "455000"
},
{
"value": "334000"
},
{
"value": "426000"
},
{
"value": "403000"
}
]
}
]
}<chart theme="fusion" caption="Cost Analysis" numberprefix="$" xaxisname="Quarters" yaxisname="Cost">
<categories>
<category label="Quarter 1" />
<category label="Quarter 2" />
<category label="Quarter 3" />
<category label="Quarter 4" />
</categories>
<dataset seriesname="Fixed Cost">
<set value="235000" />
<set value="225100" />
<set value="222000" />
<set value="230500" />
</dataset>
<dataset seriesname="Variable Cost">
<set value="230000" />
<set value="143000" />
<set value="198000" />
<set value="327600" />
</dataset>
<dataset seriesname="Budgeted cost" renderas="Line">
<set value="455000" />
<set value="334000" />
<set value="426000" />
<set value="403000" />
</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: 'mscolumnline3d',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Cost Analysis",
"numberprefix": "$",
"xaxisname": "Quarters",
"yaxisname": "Cost"
},
"categories": [{
"category": [{
"label": "Quarter 1"
},
{
"label": "Quarter 2"
},
{
"label": "Quarter 3"
},
{
"label": "Quarter 4"
}
]
}],
"dataset": [{
"seriesname": "Fixed Cost",
"data": [{
"value": "235000"
},
{
"value": "225100"
},
{
"value": "222000"
},
{
"value": "230500"
}
]
},
{
"seriesname": "Variable Cost",
"data": [{
"value": "230000"
},
{
"value": "143000"
},
{
"value": "198000"
},
{
"value": "327600"
}
]
},
{
"seriesname": "Budgeted cost",
"renderas": "Line",
"data": [{
"value": "455000"
},
{
"value": "334000"
},
{
"value": "426000"
},
{
"value": "403000"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the column 3D + line single y-axis chart.
Column 3D + Line Dual Y-axis Chart
To render a column 3D and line multi-series chart with dual y-axis, change the value of the type attribute from mscolumnline3d to mscolumn3dlinedy.
For a detailed list of attributes, refer to the chart attributes page of column 3D + line dual y-axis chart.
The chart looks like as shown below:
FusionCharts will load here..
{
"chart": {
"caption": "Product-wise Quarterly Revenue vs. Profit %",
"subCaption": "Harry's SuperMart - Last Year",
"xAxisname": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "11000"
},
{
"value": "14000"
},
{
"value": "10500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "14400"
},
{
"value": "14800"
},
{
"value": "8300"
},
{
"value": "11800"
}
]
},
{
"seriesname": "Profit %",
"renderAs": "line",
"parentYAxis": "S",
"showValues": "0",
"data": [
{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}
]
}<chart caption="Product-wise Quarterly Revenue vs. Profit %" subcaption="Harry's SuperMart - Last Year" xaxisname="Quarter" pyaxisname="Sales" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="25" divlinecolor="#999999" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" theme="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="14000" />
<set value="10500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="14400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
<dataset seriesname="Profit %" renderas="line" parentyaxis="S" showvalues="0">
<set value="14" />
<set value="16" />
<set value="15" />
<set value="17" />
</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: 'mscolumn3dlinedy',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Product-wise Quarterly Revenue vs. Profit %",
"subCaption": "Harry's SuperMart - Last Year",
"xAxisname": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "11000"
},
{
"value": "14000"
},
{
"value": "10500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "14400"
},
{
"value": "14800"
},
{
"value": "8300"
},
{
"value": "11800"
}
]
},
{
"seriesname": "Profit %",
"renderAs": "line",
"parentYAxis": "S",
"showValues": "0",
"data": [{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the column 3D + line dual y-axis chart.
Stacked Column 2D Line Single Y-axis Chart
Now, let's create a combination of stacked column and a line chart in 2D. For this, set the value of type attribute to stackedcolumn2dline.
For a detailed list of attributes, refer to the chart attributes page of stacked column 2D line single y-axis chart.
The following chart will showcase the comparison between the revenue of food products and non-food products of Harry's SuperMart. With that profit for it will be shown using a line chart.
The above chart looks like:
FusionCharts will load here..
{
"chart": {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"divlineColor": "#999999",
"divLineDashed": "1",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "110000"
},
{
"value": "150000"
},
{
"value": "135000"
},
{
"value": "150000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "114000"
},
{
"value": "148000"
},
{
"value": "83000"
},
{
"value": "118000"
}
]
},
{
"seriesname": "Profit",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "24000"
},
{
"value": "45000"
},
{
"value": "23000"
},
{
"value": "38000"
}
]
}
]
}<chart caption="Product-wise quarterly revenue Vs profit in last year" subcaption="Harry's SuperMart" xaxisname="Quarter" yaxisname="Revenue (In USD)" numberprefix="$" divlinecolor="#999999" divlinedashed="1" theme="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="110000" />
<set value="150000" />
<set value="135000" />
<set value="150000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="114000" />
<set value="148000" />
<set value="83000" />
<set value="118000" />
</dataset>
<dataset seriesname="Profit" renderas="line" showvalues="0">
<set value="24000" />
<set value="45000" />
<set value="23000" />
<set value="38000" />
</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: 'stackedcolumn2dline',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"divlineColor": "#999999",
"divLineDashed": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "110000"
},
{
"value": "150000"
},
{
"value": "135000"
},
{
"value": "150000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "114000"
},
{
"value": "148000"
},
{
"value": "83000"
},
{
"value": "118000"
}
]
},
{
"seriesname": "Profit",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "24000"
},
{
"value": "45000"
},
{
"value": "23000"
},
{
"value": "38000"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the stacked column 2D line single y-axis chart.
Stacked Column 3D Line Single Y-axis Chart
To render the stacked column 3D and line chart with single y-axis, change the value of the type attribute from stackedcolumn2dline to stackedcolumn3dline. Rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of stacked column 2D line single y-axis chart.
The above stacked column 3D line looks like:
FusionCharts will load here..
{
"chart": {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"divLineDashed": "1",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "110000"
},
{
"value": "150000"
},
{
"value": "135000"
},
{
"value": "150000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "114000"
},
{
"value": "148000"
},
{
"value": "83000"
},
{
"value": "118000"
}
]
},
{
"seriesname": "Profit",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "24000"
},
{
"value": "45000"
},
{
"value": "23000"
},
{
"value": "38000"
}
]
}
]
}<chart caption="Product-wise quarterly revenue Vs profit in last year" subcaption="Harry's SuperMart" xaxisname="Quarter" yaxisname="Revenue (In USD)" numberprefix="$" divlinedashed="1" theme="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="110000" />
<set value="150000" />
<set value="135000" />
<set value="150000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="114000" />
<set value="148000" />
<set value="83000" />
<set value="118000" />
</dataset>
<dataset seriesname="Profit" renderas="line" showvalues="0">
<set value="24000" />
<set value="45000" />
<set value="23000" />
<set value="38000" />
</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: 'stackedcolumn3dline',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"divLineDashed": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "110000"
},
{
"value": "150000"
},
{
"value": "135000"
},
{
"value": "150000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "114000"
},
{
"value": "148000"
},
{
"value": "83000"
},
{
"value": "118000"
}
]
},
{
"seriesname": "Profit",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "24000"
},
{
"value": "45000"
},
{
"value": "23000"
},
{
"value": "38000"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the stacked column 3D line single y-axis chart.
Stacked Column 3D Line Dual Y-axis Chart
To render the stacked column 3D and line chart with dual y-axis, change the value of the type attribute from stackedcolumn3dline to stackedcolumn3dlinedy. Rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of stacked column 2D line single y-axis chart.
The above stacked column 3D line looks like:
FusionCharts will load here..
{
"chart": {
"caption": "Product-wise Quarterly Revenue vs. Profit %",
"subCaption": "Harry's SuperMart - Last Year",
"xAxisname": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineColor": "#999999",
"divLineDashed": "1",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "11000"
},
{
"value": "15000"
},
{
"value": "13500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "11400"
},
{
"value": "14800"
},
{
"value": "8300"
},
{
"value": "11800"
}
]
},
{
"seriesname": "Profit %",
"renderAs": "line",
"parentYAxis": "S",
"showValues": "0",
"data": [
{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}
]
}<chart caption="Product-wise Quarterly Revenue vs. Profit %" subcaption="Harry's SuperMart - Last Year" xaxisname="Quarter" pyaxisname="Sales" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="25" divlinecolor="#999999" divlinedashed="1" theme="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="15000" />
<set value="13500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="11400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
<dataset seriesname="Profit %" renderas="line" parentyaxis="S" showvalues="0">
<set value="14" />
<set value="16" />
<set value="15" />
<set value="17" />
</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: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Product-wise Quarterly Revenue vs. Profit %",
"subCaption": "Harry's SuperMart - Last Year",
"xAxisname": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineColor": "#999999",
"divLineDashed": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "11000"
},
{
"value": "15000"
},
{
"value": "13500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "11400"
},
{
"value": "14800"
},
{
"value": "8300"
},
{
"value": "11800"
}
]
},
{
"seriesname": "Profit %",
"renderAs": "line",
"parentYAxis": "S",
"showValues": "0",
"data": [{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the stacked column 2D line single y-axis chart.
Multi Series Stacked Column 2D + Line Dual Y-axis Chart
To render the multi-series stacked column + line dual y-axis chart in 2D, set the value of type attribute to msstackedcolumn2dlinedy.
For a detailed list of attributes, refer to the chart attributes page of multi-series stacked column 2D line dual y-axis chart.
The chart looks like:
FusionCharts will load here..
{
"chart": {
"caption": "Quarterly Sales vs. Profit % in Last Year",
"subcaption": "Product-wise Break-up - Harry's SuperMart",
"xAxisName": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"numbersuffix": "M",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"dataset": [
{
"seriesname": "Processed Food",
"data": [
{
"value": "30"
},
{
"value": "26"
},
{
"value": "33"
},
{
"value": "31"
}
]
},
{
"seriesname": "Un-Processed Food",
"data": [
{
"value": "21"
},
{
"value": "28"
},
{
"value": "39"
},
{
"value": "41"
}
]
}
]
},
{
"dataset": [
{
"seriesname": "Electronics",
"data": [
{
"value": "27"
},
{
"value": "25"
},
{
"value": "28"
},
{
"value": "26"
}
]
},
{
"seriesname": "Apparels",
"data": [
{
"value": "17"
},
{
"value": "15"
},
{
"value": "18"
},
{
"value": "16"
}
]
}
]
}
],
"lineset": [
{
"seriesname": "Profit %",
"showValues": "0",
"data": [
{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}
]
}<chart caption="Quarterly Sales vs. Profit % in Last Year" subcaption="Product-wise Break-up - Harry's SuperMart" xaxisname="Quarter" pyaxisname="Sales" syaxisname="Profit %" numberprefix="$" numbersuffix="M" snumbersuffix="%" syaxismaxvalue="25" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlinedashed="1" divlinedashlen="1" theme="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset>
<dataset seriesname="Processed Food">
<set value="30" />
<set value="26" />
<set value="33" />
<set value="31" />
</dataset>
<dataset seriesname="Un-Processed Food">
<set value="21" />
<set value="28" />
<set value="39" />
<set value="41" />
</dataset>
</dataset>
<dataset>
<dataset seriesname="Electronics">
<set value="27" />
<set value="25" />
<set value="28" />
<set value="26" />
</dataset>
<dataset seriesname="Apparels">
<set value="17" />
<set value="15" />
<set value="18" />
<set value="16" />
</dataset>
</dataset>
<lineset seriesname="Profit %" showvalues="0">
<set value="14" />
<set value="16" />
<set value="15" />
<set value="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: 'msstackedcolumn2dlinedy',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Sales vs. Profit % in Last Year",
"subcaption": "Product-wise Break-up - Harry's SuperMart",
"xAxisName": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"numbersuffix": "M",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"dataset": [{
"seriesname": "Processed Food",
"data": [{
"value": "30"
},
{
"value": "26"
},
{
"value": "33"
},
{
"value": "31"
}
]
},
{
"seriesname": "Un-Processed Food",
"data": [{
"value": "21"
},
{
"value": "28"
},
{
"value": "39"
},
{
"value": "41"
}
]
}
]
},
{
"dataset": [{
"seriesname": "Electronics",
"data": [{
"value": "27"
},
{
"value": "25"
},
{
"value": "28"
},
{
"value": "26"
}
]
},
{
"seriesname": "Apparels",
"data": [{
"value": "17"
},
{
"value": "15"
},
{
"value": "18"
},
{
"value": "16"
}
]
}
]
}
],
"lineset": [{
"seriesname": "Profit %",
"showValues": "0",
"data": [{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the stacked column 2D line dual y-axis chart.
Now, let's customize the appearance and properties of the combination charts.
Plot Trend Elements
For a dual y-axis chart, you can plot trend-lines for both, the primary y-axis and the secondary y-axis. The following sample will showcase the average revenue trend-line which will be plotted against the primary y-axis that shows the amount in USD. The average profit percent trend-line will be plotted against the secondary y-axis that shows the profit percent.
To plot a trend-lines on a chart, follow the steps given below:
Create a
trendlinesobject to render one or more than one trend-lines.Create a
lineobject for a particular trend-line.In
lineobject, set thestartValueattribute to specify the starting value for the trend-line. Whereas, set theendValueto specify the ending value for the trend-line.Set the
colorattribute to specify the hex code for the color. This attribute is used when you render the trend-line and its associated text.Set the
displayValueattribute to specify a string caption to be displayed with the trend-line.Specify the
isTrendZoneattribute to set whether a chart will be rendered with a trend-line or a trend-zone. The default value for this attribute is1, which renders the trend-zone. Setting it to0will render a trend-line.
This attribute belongs to the line object, which in turn belongs to the trendlines object.
FusionCharts Suite XT includes several options to customize trend elements. To know more about the trend elements in a single y-axis chart, click here. To know more about the dual y-axis chart, click here.
Refer to the code given below:
{
"chart": {
...
},
"data": [],
"trendlines": [{
"line": [{
"startValue": "18833",
"color": "#0075c2",
"valuePadding": "20",
"displayvalue": "Average{br}Revenue"
},
{
"startValue": "21",
"parentYAxis": "s",
"color": "#f2c500",
"displayvalue": "Average{br}Profit %"
}]
}]
}A combination chart rendered with two trend-lines looks like this:
FusionCharts will load here..
Click here to edit the combination chart.
Placing the Secondary Axis on the Left
You can choose to swap positions of the primary and secondary axes using a single attribute i.e., primaryAxisOnLeft. Set this attribute to 1, to render the primary axis on the left and the secondary axis on right.
Refer to the code given below:
{
"chart": {
"primaryAxisOnLeft" : "0"
}
}A combination chart rendered with the positions of the axes swapped looks like this:
FusionCharts will load here..
Click here to edit the combination chart.