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 type attribute. To render a multi-series combination chart, set mscombi2D.

  • Set the container object using renderAt attribute.

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

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

For a detailed list of attributes, refer to the chart attributes page of 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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }

});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                    }
                ]
            }
        ]
    }
});
    fusioncharts.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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: '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"
                }
            ]
        }]
    }
});
    fusioncharts.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 trendlines object to render one or more than one trend-lines.

  • Create a line object for a particular trend-line.

  • In line object, set the startValue attribute to specify the starting value for the trend-line. Whereas, set the endValue to specify the ending value for the trend-line.

  • Set the color attribute to specify the hex code for the color. This attribute is used when you render the trend-line and its associated text.

  • Set the displayValue attribute to specify a string caption to be displayed with the trend-line.

  • Specify the isTrendZone attribute to set whether a chart will be rendered with a trend-line or a trend-zone. The default value for this attribute is 1, which renders the trend-zone. Setting it to 0 will 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.

Was this article helpful to you ?