Overlapped Column and Bar Charts

These chart types belong to FusionCharts XT.

In version 3.13.0, FusionCharts has come up with a clever and rather effective bar chart to display your data- Overlapped Charts. In this chart, the two data series overlap. The width of the plot for the data series differs which makes the chart easy to compare.

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

  • Overlapped Column 2D Chart
  • Overlapped Bar 2D Chart

Overlapped Column 2D Chart

In this sample let's create an Overlapped Column 2D chart comparing the "Healthcare Expenditure per capita" between public and private sectors.

To create an Overlapped Column 2D chart follow the steps given below:

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

  • Specify the chart type using the type attribute. To render an overlapped column 2D chart, set overlappedColumn2D.

  • 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 overlapped column 2D chart.

An overlapped column 2D chart looks like:

FusionCharts will load here..
{ "chart": { "caption": "Healthcare Expenditure per capita (Public vs Private sector)", "subCaption": "in 2016", "xAxisName": "Country", "yAxisName": "Amount (in USD)", "showValues": "0", "theme": "fusion" }, "categories": [ { "category": [ { "label": "Switzerland" }, { "label": "USA" }, { "label": "Canada" }, { "label": "Australia" }, { "label": "OECD-35" }, { "label": "Israel" } ] } ], "dataset": [ { "seriesname": "Public", "data": [ { "value": "5038" }, { "value": "4860" }, { "value": "3341" }, { "value": "3190" }, { "value": "2937" }, { "value": "1702" } ] }, { "seriesname": "Private", "data": [ { "value": "2881" }, { "value": "5032" }, { "value": "1412" }, { "value": "1518" }, { "value": "1066" }, { "value": "1120" } ] } ] }
{
    "chart": {
        "caption": "Healthcare Expenditure per capita (Public vs Private sector)",
        "subCaption": "in 2016",
        "xAxisName": "Country",
        "yAxisName": "Amount (in USD)",
        "showValues": "0",
        "theme": "fusion"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Switzerland"
                },
                {
                    "label": "USA"
                },
                {
                    "label": "Canada"
                },
                {
                    "label": "Australia"
                },
                {
                    "label": "OECD-35"
                },
                {
                    "label": "Israel"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Public",
            "data": [
                {
                    "value": "5038"
                },
                {
                    "value": "4860"
                },
                {
                    "value": "3341"
                },
                {
                    "value": "3190"
                },
                {
                    "value": "2937"
                },
                {
                    "value": "1702"
                }
            ]
        },
        {
            "seriesname": "Private",
            "data": [
                {
                    "value": "2881"
                },
                {
                    "value": "5032"
                },
                {
                    "value": "1412"
                },
                {
                    "value": "1518"
                },
                {
                    "value": "1066"
                },
                {
                    "value": "1120"
                }
            ]
        }
    ]
}
<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: "overlappedColumn2d",
    renderAt: "chart-container",
    width: "700",
    height: "400",
    dataFormat: "json",
    dataSource: {
        "chart": {
            "caption": "Healthcare Expenditure per capita (Public vs Private sector)",
            "subCaption": "in 2016",
            "xAxisName": "Country",
            "yAxisName": "Amount (in USD)",
            "showValues": "0",
            "theme": "fusion"
        },
        "categories": [{
            "category": [{
                "label": "Switzerland"
            }, {
                "label": "USA"
            }, {
                "label": "Canada"
            }, {
                "label": "Australia"
            }, {
                "label": "OECD-35"
            }, {
                "label": "Israel"
            }]
        }],
        "dataset": [{
            "seriesname": "Public",
            "data": [{
                "value": "5038"
            }, {
                "value": "4860"
            }, {
                "value": "3341"
            }, {
                "value": "3190"
            }, {
                "value": "2937"
            }, {
                "value": "1702"
            }]
        }, {
            "seriesname": "Private",
            "data": [{
                "value": "2881"
            }, {
                "value": "5032"
            }, {
                "value": "1412"
            }, {
                "value": "1518"
            }, {
                "value": "1066"
            }, {
                "value": "1120"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the above overlapped column 2D chart.

Overlapped Bar 2D Chart

To render an overlapped bar 2D chart, change the value of type attribute from overlappedColumn2D to overlappedBar2D. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of overlapped bar 2D chart.

The overlapped bar 2D chart looks like:

FusionCharts will load here..
{ "chart": { "caption": "Major League Baseball - Season Rankings", "subCaption": "Teams in the Lead", "xAxisName": "Team", "yAxisName": "Position", "theme": "fusion", "showValues": "0" }, "categories": [ { "category": [ { "label": "Boston Red Sox" }, { "label": "New York Yankees" }, { "label": "Tampa Bay Rays" }, { "label": "Toronto Blue Jays" }, { "label": "Baltimore Orioles" }, { "label": "Cleveland Indians" }, { "label": "Detroit Tigers" }, { "label": "Minnesota Twins" }, { "label": "Chicago White Sox" }, { "label": "Kansas City Royals" } ] } ], "dataset": [ { "seriesname": "Matches", "data": [ { "value": "88" }, { "value": "84" }, { "value": "86" }, { "value": "86" }, { "value": "85" }, { "value": "85" }, { "value": "88" }, { "value": "83" }, { "value": "86" }, { "value": "86" } ] }, { "seriesname": "Wins", "data": [ { "value": "57" }, { "value": "54" }, { "value": "42" }, { "value": "39" }, { "value": "24" }, { "value": "46" }, { "value": "38" }, { "value": "35" }, { "value": "29" }, { "value": "25" } ] } ] }
{
    "chart": {
        "caption": "Major League Baseball - Season Rankings",
        "subCaption": "Teams in the Lead",
        "xAxisName": "Team",
        "yAxisName": "Position",
        "theme": "fusion",
        "showValues": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Boston Red Sox"
                },
                {
                    "label": "New York Yankees"
                },
                {
                    "label": "Tampa Bay Rays"
                },
                {
                    "label": "Toronto Blue Jays"
                },
                {
                    "label": "Baltimore Orioles"
                },
                {
                    "label": "Cleveland Indians"
                },
                {
                    "label": "Detroit Tigers"
                },
                {
                    "label": "Minnesota Twins"
                },
                {
                    "label": "Chicago White Sox"
                },
                {
                    "label": "Kansas City Royals"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Matches",
            "data": [
                {
                    "value": "88"
                },
                {
                    "value": "84"
                },
                {
                    "value": "86"
                },
                {
                    "value": "86"
                },
                {
                    "value": "85"
                },
                {
                    "value": "85"
                },
                {
                    "value": "88"
                },
                {
                    "value": "83"
                },
                {
                    "value": "86"
                },
                {
                    "value": "86"
                }
            ]
        },
        {
            "seriesname": "Wins",
            "data": [
                {
                    "value": "57"
                },
                {
                    "value": "54"
                },
                {
                    "value": "42"
                },
                {
                    "value": "39"
                },
                {
                    "value": "24"
                },
                {
                    "value": "46"
                },
                {
                    "value": "38"
                },
                {
                    "value": "35"
                },
                {
                    "value": "29"
                },
                {
                    "value": "25"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    "type": "overlappedBar2d",
    "renderAt": "chart-container",
    "width": "600",
    "height": "500",
    "dataFormat": "json",
    "dataSource": {
        "chart": {
            "caption": "Major League Baseball - Season Rankings",
            "subCaption": "Teams in the Lead",
            "xAxisName": "Team",
            "yAxisName": "Position",
            "theme": "fusion",
            "showValues": "0"
        },
        "categories": [{
            "category": [{
                "label": "Boston Red Sox"
            }, {
                "label": "New York Yankees"
            }, {
                "label": "Tampa Bay Rays"
            }, {
                "label": "Toronto Blue Jays"
            }, {
                "label": "Baltimore Orioles"
            }, {
                "label": "Cleveland Indians"
            }, {
                "label": "Detroit Tigers"
            }, {
                "label": "Minnesota Twins"
            }, {
                "label": "Chicago White Sox"
            }, {
                "label": "Kansas City Royals"
            }]
        }],
        "dataset": [{
            "seriesname": "Matches",
            "data": [{
                "value": "88"
            }, {
                "value": "84"
            }, {
                "value": "86"
            }, {
                "value": "86"
            }, {
                "value": "85"
            }, {
                "value": "85"
            }, {
                "value": "88"
            }, {
                "value": "83"
            }, {
                "value": "86"
            }, {
                "value": "86"
            }]
        }, {
            "seriesname": "Wins",
            "data": [{
                "value": "57"
            }, {
                "value": "54"
            }, {
                "value": "42"
            }, {
                "value": "39"
            }, {
                "value": "24"
            }, {
                "value": "46"
            }, {
                "value": "38"
            }, {
                "value": "35"
            }, {
                "value": "29"
            }, {
                "value": "25"
            }]
        }]
    }
});
    fusioncharts.render();
    });
</script>
</head>
<body>
    <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Click here to edit the above overlapped bar 2D chart.

Was this article helpful to you ?