Choose an item

Multi-series Charts

These chart types belong to FusionCharts XT.

FusionCharts Suite XT includes multi-series charts that allow to plot data for multiple datasets. For example, you can plot the revenue collected each month for the last two years using a multi-series chart. Multi-series charts allow to plot the highs and lows of multiple datasets while also comparing them.

The different types of multi-series charts available in the FusionCharts Suite XT are:

  • Multi-series Column 2D Chart

  • Multi-series Column 3D Chart

  • Multi-series Bar 2D Chart

  • Multi-series Bar 3D Chart

  • Multi-series Line 2D Chart

  • Multi-series Area 2D Chart

Multi-series Column 2D Chart

In this sample, let's create a multi-series column 2D chart showcasing the comparison between quarterly revenue earned for the previous year and the current year. The columns for both datasets, one for the previous year and one for the current year, have been rendered using different colors. This makes it easy to interpret and compare the data.

To create a multi-series 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 a multi-series column 2D chart, set mscolumn2d.

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

A simple multi-series column 2D chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Comparison of Quarterly Revenue",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "plotFillAlpha": "80",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Previous Year",
            "data": [
                {
                    "value": "10000"
                },
                {
                    "value": "11500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Current Year",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "26800"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "12250",
                    "color": "#5D62B5",
                    "displayvalue": "Previous{br}Average",
                    "valueOnRight": "1",
                    "thickness": "1",
                    "showBelow": "1",
                    "tooltext": "Previous year quarterly target  : $13.5K"
                },
                {
                    "startvalue": "25950",
                    "color": "#29C3BE",
                    "displayvalue": "Current{br}Average",
                    "valueOnRight": "1",
                    "thickness": "1",
                    "showBelow": "1",
                    "tooltext": "Current year quarterly target  : $23K"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Comparison of Quarterly Revenue" xaxisname="Quarter" yaxisname="Revenues (In USD)" numberprefix="$" plotfillalpha="80" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1">
    <categories>
        <category label="Q1" />
        <category label="Q2" />
        <category label="Q3" />
        <category label="Q4" />
    </categories>
    <dataset seriesname="Previous Year">
        <set value="10000" />
        <set value="11500" />
        <set value="12500" />
        <set value="15000" />
    </dataset>
    <dataset seriesname="Current Year">
        <set value="25400" />
        <set value="29800" />
        <set value="21800" />
        <set value="26800" />
    </dataset>
    <trendlines>
        <line startvalue="12250" color="#5D62B5" displayvalue="Previous{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Previous year quarterly target  : $13.5K" />
        <line startvalue="25950" color="#29C3BE" displayvalue="Current{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Current year quarterly target  : $23K" />
    </trendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Comparison of Quarterly Revenue",
            "xAxisname": "Quarter",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "plotFillAlpha": "80",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1"
        },
        "categories": [{
            "category": [{
                "label": "Q1"
            }, {
                "label": "Q2"
            }, {
                "label": "Q3"
            }, {
                "label": "Q4"
            }]
        }],
        "dataset": [{
            "seriesname": "Previous Year",
            "data": [{
                "value": "10000"
            }, {
                "value": "11500"
            }, {
                "value": "12500"
            }, {
                "value": "15000"
            }]
        }, {
            "seriesname": "Current Year",
            "data": [{
                "value": "25400"
            }, {
                "value": "29800"
            }, {
                "value": "21800"
            }, {
                "value": "26800"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "12250",
                "color": "#5D62B5",
                "displayvalue": "Previous{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Previous year quarterly target  : $13.5K"
            }, {
                "startvalue": "25950",
                "color": "#29C3BE",
                "displayvalue": "Current{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Current year quarterly target  : $23K"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above multi-series chart.

Multi-series Column 3D Chart

To render a multi-series column chart in 3D, change the value of the type attribute from msColumn2D to msColumn3D. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of multi-series column 3D chart.

The multi-series column chart in 3D looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Comparison of Quarterly Revenue",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "plotFillAlpha": "80",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Previous Year",
            "data": [
                {
                    "value": "10000"
                },
                {
                    "value": "11500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Current Year",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "26800"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "12250",
                    "color": "#5D62B5",
                    "displayvalue": "Previous{br}Average",
                    "valueOnRight": "1",
                    "thickness": "1",
                    "showBelow": "1",
                    "tooltext": "Previous year quarterly target  : $13.5K"
                },
                {
                    "startvalue": "25950",
                    "color": "#29C3BE",
                    "displayvalue": "Current{br}Average",
                    "valueOnRight": "1",
                    "thickness": "1",
                    "showBelow": "1",
                    "tooltext": "Current year quarterly target  : $23K"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Comparison of Quarterly Revenue" xaxisname="Quarter" yaxisname="Revenues (In USD)" numberprefix="$" plotfillalpha="80" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1">
    <categories>
        <category label="Q1" />
        <category label="Q2" />
        <category label="Q3" />
        <category label="Q4" />
    </categories>
    <dataset seriesname="Previous Year">
        <set value="10000" />
        <set value="11500" />
        <set value="12500" />
        <set value="15000" />
    </dataset>
    <dataset seriesname="Current Year">
        <set value="25400" />
        <set value="29800" />
        <set value="21800" />
        <set value="26800" />
    </dataset>
    <trendlines>
        <line startvalue="12250" color="#5D62B5" displayvalue="Previous{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Previous year quarterly target  : $13.5K" />
        <line startvalue="25950" color="#29C3BE" displayvalue="Current{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Current year quarterly target  : $23K" />
    </trendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'mscolumn3d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Comparison of Quarterly Revenue",
            "xAxisname": "Quarter",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$",
            "plotFillAlpha": "80",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1"
        },
        "categories": [{
            "category": [{
                "label": "Q1"
            }, {
                "label": "Q2"
            }, {
                "label": "Q3"
            }, {
                "label": "Q4"
            }]
        }],
        "dataset": [{
            "seriesname": "Previous Year",
            "data": [{
                "value": "10000"
            }, {
                "value": "11500"
            }, {
                "value": "12500"
            }, {
                "value": "15000"
            }]
        }, {
            "seriesname": "Current Year",
            "data": [{
                "value": "25400"
            }, {
                "value": "29800"
            }, {
                "value": "21800"
            }, {
                "value": "26800"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "12250",
                "color": "#5D62B5",
                "displayvalue": "Previous{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Previous year quarterly target  : $13.5K"
            }, {
                "startvalue": "25950",
                "color": "#29C3BE",
                "displayvalue": "Current{br}Average",
                "valueOnRight": "1",
                "thickness": "1",
                "showBelow": "1",
                "tooltext": "Current year quarterly target  : $23K"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above multi-series chart.

Multi-series Bar 2D Chart

Let's move ahead to create a multi-series bar chart in 2D which will show sales as per two major categories in different stores for last month.

To render a multi-series bar chart in 2D, set the type to msbar2d.

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

A multi-series bar 2D chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Split of Sales by Product Category",
        "subCaption": "In top 5 stores last month",
        "yAxisname": "Sales (In USD)",
        "numberPrefix": "$"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Bakersfield Central"
                },
                {
                    "label": "Garden Groove harbour"
                },
                {
                    "label": "Los Angeles Topanga"
                },
                {
                    "label": "Compton-Rancho Dom"
                },
                {
                    "label": "Daly City Serramonte"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Food Products",
            "data": [
                {
                    "value": "17000"
                },
                {
                    "value": "19500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "14500"
                },
                {
                    "value": "17500"
                }
            ]
        },
        {
            "seriesname": "Non-Food Products",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "19500"
                },
                {
                    "value": "11500"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "15000",
                    "color": "#5D62B5",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Food"
                },
                {
                    "startvalue": "22000",
                    "color": "#29C3BE",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Non-food"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Split of Sales by Product Category" subcaption="In top 5 stores last month" yaxisname="Sales (In USD)" numberprefix="$">
    <categories>
        <category label="Bakersfield Central" />
        <category label="Garden Groove harbour" />
        <category label="Los Angeles Topanga" />
        <category label="Compton-Rancho Dom" />
        <category label="Daly City Serramonte" />
    </categories>
    <dataset seriesname="Food Products">
        <set value="17000" />
        <set value="19500" />
        <set value="12500" />
        <set value="14500" />
        <set value="17500" />
    </dataset>
    <dataset seriesname="Non-Food Products">
        <set value="25400" />
        <set value="29800" />
        <set value="21800" />
        <set value="19500" />
        <set value="11500" />
    </dataset>
    <trendlines>
        <line startvalue="15000" color="#5D62B5" valueonright="1" displayvalue="Avg. for{br}Food" />
        <line startvalue="22000" color="#29C3BE" valueonright="1" displayvalue="Avg. for{br}Non-food" />
    </trendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'msbar2d',
    renderAt: 'chart-container',
    width: '600',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Split of Sales by Product Category",
            "subCaption": "In top 5 stores last month",
            "yAxisname": "Sales (In USD)",
            "numberPrefix": "$"
        },
        "categories": [{
            "category": [{
                    "label": "Bakersfield Central"
                },
                {
                    "label": "Garden Groove harbour"
                },
                {
                    "label": "Los Angeles Topanga"
                },
                {
                    "label": "Compton-Rancho Dom"
                },
                {
                    "label": "Daly City Serramonte"
                }
            ]
        }],
        "dataset": [{
                "seriesname": "Food Products",
                "data": [{
                        "value": "17000"
                    },
                    {
                        "value": "19500"
                    },
                    {
                        "value": "12500"
                    },
                    {
                        "value": "14500"
                    },
                    {
                        "value": "17500"
                    }
                ]
            },
            {
                "seriesname": "Non-Food Products",
                "data": [{
                        "value": "25400"
                    },
                    {
                        "value": "29800"
                    },
                    {
                        "value": "21800"
                    },
                    {
                        "value": "19500"
                    },
                    {
                        "value": "11500"
                    }
                ]
            }
        ],
        "trendlines": [{
            "line": [{
                    "startvalue": "15000",
                    "color": "#5D62B5",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Food"
                },
                {
                    "startvalue": "22000",
                    "color": "#29C3BE",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Non-food"
                }
            ]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above multi-series chart.

Multi-series Bar 3D Chart

To render a multi-series bar chart in 3D, change the value of the type attribute from msBar2D to msBar3D. The rest of the data structure remains the same.

For a detailed list of attributes, refer to the chart attributes page of multi-series bar 3D chart.

The multi-series bar chart in 3D looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Split of Sales by Product Category",
        "subCaption": "In top 5 stores last month",
        "yAxisname": "Sales (In USD)",
        "numberPrefix": "$"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Bakersfield Central"
                },
                {
                    "label": "Garden Groove harbour"
                },
                {
                    "label": "Los Angeles Topanga"
                },
                {
                    "label": "Compton-Rancho Dom"
                },
                {
                    "label": "Daly City Serramonte"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Food Products",
            "data": [
                {
                    "value": "17000"
                },
                {
                    "value": "19500"
                },
                {
                    "value": "12500"
                },
                {
                    "value": "14500"
                },
                {
                    "value": "17500"
                }
            ]
        },
        {
            "seriesname": "Non-Food Products",
            "data": [
                {
                    "value": "25400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "21800"
                },
                {
                    "value": "19500"
                },
                {
                    "value": "11500"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "15000",
                    "color": "#5D62B5",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Food"
                },
                {
                    "startvalue": "22000",
                    "color": "#29C3BE",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Non-food"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Split of Sales by Product Category" subcaption="In top 5 stores last month" yaxisname="Sales (In USD)" numberprefix="$">
    <categories>
        <category label="Bakersfield Central" />
        <category label="Garden Groove harbour" />
        <category label="Los Angeles Topanga" />
        <category label="Compton-Rancho Dom" />
        <category label="Daly City Serramonte" />
    </categories>
    <dataset seriesname="Food Products">
        <set value="17000" />
        <set value="19500" />
        <set value="12500" />
        <set value="14500" />
        <set value="17500" />
    </dataset>
    <dataset seriesname="Non-Food Products">
        <set value="25400" />
        <set value="29800" />
        <set value="21800" />
        <set value="19500" />
        <set value="11500" />
    </dataset>
    <trendlines>
        <line startvalue="15000" color="#5D62B5" valueonright="1" displayvalue="Avg. for{br}Food" />
        <line startvalue="22000" color="#29C3BE" valueonright="1" displayvalue="Avg. for{br}Non-food" />
    </trendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'msbar3d',
    renderAt: 'chart-container',
    width: '600',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Split of Sales by Product Category",
            "subCaption": "In top 5 stores last month",
            "yAxisname": "Sales (In USD)",
            "numberPrefix": "$"
        },
        "categories": [{
            "category": [{
                    "label": "Bakersfield Central"
                },
                {
                    "label": "Garden Groove harbour"
                },
                {
                    "label": "Los Angeles Topanga"
                },
                {
                    "label": "Compton-Rancho Dom"
                },
                {
                    "label": "Daly City Serramonte"
                }
            ]
        }],
        "dataset": [{
                "seriesname": "Food Products",
                "data": [{
                        "value": "17000"
                    },
                    {
                        "value": "19500"
                    },
                    {
                        "value": "12500"
                    },
                    {
                        "value": "14500"
                    },
                    {
                        "value": "17500"
                    }
                ]
            },
            {
                "seriesname": "Non-Food Products",
                "data": [{
                        "value": "25400"
                    },
                    {
                        "value": "29800"
                    },
                    {
                        "value": "21800"
                    },
                    {
                        "value": "19500"
                    },
                    {
                        "value": "11500"
                    }
                ]
            }
        ],
        "trendlines": [{
            "line": [{
                    "startvalue": "15000",
                    "color": "#5D62B5",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Food"
                },
                {
                    "startvalue": "22000",
                    "color": "#29C3BE",
                    "valueOnRight": "1",
                    "displayvalue": "Avg. for{br}Non-food"
                }
            ]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above multi-series chart.

Multi-series Line Chart

Now, let's create a multi-series line chart which will show the comparison between the number of visitors in malls in a week. The line segments for both datasets, one for the last week and one for the current week, have been rendered using different colors. This makes it easy to interpret and compare the data.

To render a multi-series line chart, set the type to msline.

For a detailed list of attributes, refer to the chart attributes page of multi-series line 2D chart.

A multi-series line chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Number of visitors last week",
        "subCaption": "Bakersfield Central vs Los Angeles Topanga",
        "xAxisName": "Day"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "vline": "true",
                    "lineposition": "0",
                    "color": "#62B58F",
                    "labelHAlign": "center",
                    "labelPosition": "0",
                    "label": "National holiday",
                    "dashed": "1"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Bakersfield Central",
            "data": [
                {
                    "value": "15123"
                },
                {
                    "value": "14233"
                },
                {
                    "value": "25507"
                },
                {
                    "value": "9110"
                },
                {
                    "value": "15529"
                },
                {
                    "value": "20803"
                },
                {
                    "value": "19202"
                }
            ]
        },
        {
            "seriesname": "Los Angeles Topanga",
            "data": [
                {
                    "value": "13400"
                },
                {
                    "value": "12800"
                },
                {
                    "value": "22800"
                },
                {
                    "value": "12400"
                },
                {
                    "value": "15800"
                },
                {
                    "value": "19800"
                },
                {
                    "value": "21800"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "17022",
                    "color": "#62B58F",
                    "valueOnRight": "1",
                    "displayvalue": "Average"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Number of visitors last week" subcaption="Bakersfield Central vs Los Angeles Topanga" xaxisname="Day">
    <categories>
        <category label="Mon" />
        <category label="Tue" />
        <category label="Wed" />
        <vline lineposition="0" color="#62B58F" labelhalign="center" labelposition="0" label="National holiday" dashed="1" />
        <category label="Thu" />
        <category label="Fri" />
        <category label="Sat" />
        <category label="Sun" />
    </categories>
    <dataset seriesname="Bakersfield Central">
        <set value="15123" />
        <set value="14233" />
        <set value="25507" />
        <set value="9110" />
        <set value="15529" />
        <set value="20803" />
        <set value="19202" />
    </dataset>
    <dataset seriesname="Los Angeles Topanga">
        <set value="13400" />
        <set value="12800" />
        <set value="22800" />
        <set value="12400" />
        <set value="15800" />
        <set value="19800" />
        <set value="21800" />
    </dataset>
    <trendlines>
        <line startvalue="17022" color="#62B58F" valueonright="1" displayvalue="Average" />
    </trendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Number of visitors last week",
            "subCaption": "Bakersfield Central vs Los Angeles Topanga",
            "xAxisName": "Day"
        },
        "categories": [{
            "category": [{
                "label": "Mon"
            }, {
                "label": "Tue"
            }, {
                "label": "Wed"
            }, {
                "vline": "true",
                "lineposition": "0",
                "color": "#62B58F",
                "labelHAlign": "center",
                "labelPosition": "0",
                "label": "National holiday",
                "dashed": "1"
            }, {
                "label": "Thu"
            }, {
                "label": "Fri"
            }, {
                "label": "Sat"
            }, {
                "label": "Sun"
            }]
        }],
        "dataset": [{
            "seriesname": "Bakersfield Central",
            "data": [{
                "value": "15123"
            }, {
                "value": "14233"
            }, {
                "value": "25507"
            }, {
                "value": "9110"
            }, {
                "value": "15529"
            }, {
                "value": "20803"
            }, {
                "value": "19202"
            }]
        }, {
            "seriesname": "Los Angeles Topanga",
            "data": [{
                "value": "13400"
            }, {
                "value": "12800"
            }, {
                "value": "22800"
            }, {
                "value": "12400"
            }, {
                "value": "15800"
            }, {
                "value": "19800"
            }, {
                "value": "21800"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "17022",
                "color": "#62B58F",
                "valueOnRight": "1",
                "displayvalue": "Average"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above multi-series chart.

Multi-series Area Chart

To render a multi-series area chart the same use case as above, set the type to msarea.

For a detailed list of attributes, refer to the chart attributes page of multi-series area 2D chart.

A multi-series area chart looks like:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Number of visitors last week",
        "subCaption": "Bakersfield Central vs Los Angeles Topanga",
        "xAxisName": "Day"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Mon"
                },
                {
                    "label": "Tue"
                },
                {
                    "label": "Wed"
                },
                {
                    "vline": "true",
                    "lineposition": "0",
                    "color": "#62B58F",
                    "labelHAlign": "center",
                    "labelPosition": "0",
                    "label": "National holiday",
                    "dashed": "1"
                },
                {
                    "label": "Thu"
                },
                {
                    "label": "Fri"
                },
                {
                    "label": "Sat"
                },
                {
                    "label": "Sun"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Bakersfield Central",
            "data": [
                {
                    "value": "15123"
                },
                {
                    "value": "14233"
                },
                {
                    "value": "25507"
                },
                {
                    "value": "9110"
                },
                {
                    "value": "15529"
                },
                {
                    "value": "20803"
                },
                {
                    "value": "19202"
                }
            ]
        },
        {
            "seriesname": "Los Angeles Topanga",
            "data": [
                {
                    "value": "13400"
                },
                {
                    "value": "12800"
                },
                {
                    "value": "22800"
                },
                {
                    "value": "12400"
                },
                {
                    "value": "15800"
                },
                {
                    "value": "19800"
                },
                {
                    "value": "21800"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "17022",
                    "color": "#62B58F",
                    "valueOnRight": "1",
                    "displayvalue": "Average"
                }
            ]
        }
    ]
}
<chart theme="fusion" caption="Number of visitors last week" subcaption="Bakersfield Central vs Los Angeles Topanga" xaxisname="Day">
    <categories>
        <category label="Mon" />
        <category label="Tue" />
        <category label="Wed" />
        <vline lineposition="0" color="#62B58F" labelhalign="center" labelposition="0" label="National holiday" dashed="1" />
        <category label="Thu" />
        <category label="Fri" />
        <category label="Sat" />
        <category label="Sun" />
    </categories>
    <dataset seriesname="Bakersfield Central">
        <set value="15123" />
        <set value="14233" />
        <set value="25507" />
        <set value="9110" />
        <set value="15529" />
        <set value="20803" />
        <set value="19202" />
    </dataset>
    <dataset seriesname="Los Angeles Topanga">
        <set value="13400" />
        <set value="12800" />
        <set value="22800" />
        <set value="12400" />
        <set value="15800" />
        <set value="19800" />
        <set value="21800" />
    </dataset>
    <trendlines>
        <line startvalue="17022" color="#62B58F" valueonright="1" displayvalue="Average" />
    </trendlines>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'msarea',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Number of visitors last week",
            "subCaption": "Bakersfield Central vs Los Angeles Topanga",
            "xAxisName": "Day"
        },
        "categories": [{
            "category": [{
                "label": "Mon"
            }, {
                "label": "Tue"
            }, {
                "label": "Wed"
            }, {
                "vline": "true",
                "lineposition": "0",
                "color": "#62B58F",
                "labelHAlign": "center",
                "labelPosition": "0",
                "label": "National holiday",
                "dashed": "1"
            }, {
                "label": "Thu"
            }, {
                "label": "Fri"
            }, {
                "label": "Sat"
            }, {
                "label": "Sun"
            }]
        }],
        "dataset": [{
            "seriesname": "Bakersfield Central",
            "data": [{
                "value": "15123"
            }, {
                "value": "14233"
            }, {
                "value": "25507"
            }, {
                "value": "9110"
            }, {
                "value": "15529"
            }, {
                "value": "20803"
            }, {
                "value": "19202"
            }]
        }, {
            "seriesname": "Los Angeles Topanga",
            "data": [{
                "value": "13400"
            }, {
                "value": "12800"
            }, {
                "value": "22800"
            }, {
                "value": "12400"
            }, {
                "value": "15800"
            }, {
                "value": "19800"
            }, {
                "value": "21800"
            }]
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "17022",
                "color": "#62B58F",
                "valueOnRight": "1",
                "displayvalue": "Average"
            }]
        }]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above multi-series chart.

Note that the number of category objects defined should be equal to the number of data objects defined, that is, if you mention twelve categories (twelve months), the data for both years (2013 and 2014) should also contain twelve data objects (twelve rows of data). Else, the chart will display empty space at that position.