Category / Section
How to create stacked bar chart with multiple series?
1 min read
This article explains how to create a stacked bar chart with multiple series.
Stacked bar charts are charts with Y values stacked over one another in the series order. They show the relationship between individual values and the total sum of the points.
Let’s see, how to create a simple stacked bar chart with multiple series in java script.
Step-1: Adding Script file
First, you should create an HTML file, such as stackedBar.html, and then include the ej2.min.js script file in the head tag. It contains all the dependencies needed to render the chart.
stackedBar.html <html> <head> // Adding ej2.min.js CDN link <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> </head> </html>
Step-2: Creating Chart Container
Create a container for the chart to get render.
stackedBar.html <html> <body> // Chart container <div id="container"></div> </body> </html>
Step-3: Creating the chart
Multiple series data
Consider the following multiple series data.
Series – 1 data
var chartData1 = [
{ x: 'Jan', y: 6, y1: 6, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },
{ x: 'Mar', y: 12, y1: 11, y2: 2 }, { x: 'Apr', y: 15, y1: 16, y2: 2.5 },
{ x: 'May', y: 20, y1: 21, y2: 3 }, { x: 'Jun', y: 24, y1: 25, y2: 3.5 },
{ x: 'Jul', y: 28, y1: 27, y2: 4 }, { x: 'Aug', y: 32, y1: 31, y2: 4.5 },
{ x: 'Sep', y: 33, y1: 34, y2: 5 }, { x: 'Oct', y: 35, y1: 34, y2: 5.5 },
{ x: 'Nov', y: 40, y1: 41, y2: 6 }, { x: 'Dec', y: 42, y1: 42, y2: 6.5 }];
Series – 2 data
var chartData2 = [
{ x: 'Jan', y: 3, y1: 3, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },
{ x: 'Mar', y: 6, y1: 1, y2: 2 }, { x: 'Apr', y: 5, y1: 6, y2: 2.5 },
{ x: 'May', y: 10, y1: 11, y2: 3 }, { x: 'Jun', y: 14, y1: 15, y2: 3.5 },
{ x: 'Jul', y: 14, y1: 17, y2: 4 }, { x: 'Aug', y: 22, y1: 21, y2: 4.5 },
{ x: 'Sep', y: 23, y1: 24, y2: 5 }, { x: 'Oct', y: 25, y1: 24, y2: 5.5 },
{ x: 'Nov', y: 20, y1: 31, y2: 6 }, { x: 'Dec', y: 32, y1: 32, y2: 6.5 }
];
Here are the steps for creating the chart:
- You should create JS file like stackedBar.js, and it is to be included in stackedBar.html.
- Create new chart instance by using new ej.charts.Chart().
- Assign the chartData1 and chartData2 values using dataSource property in series.
- Bind the x and y values of data source with xName and yName properties
- You can select chart types using type property in series.
- Group the series using stackingGroup property.
- You can give the space between the series using columnSpacing property.
- Now append the chart instance to the container to render the chart.
// stackedBar.html <html> <head> // Adding ej2.min.js CDN link <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> // Adding stackedBar.js script file <script src="stackedBar.js" type="text/javascript"></script> </head> </html>
// stackedBar.js
var chartData1 = [
{ x: 'Jan', y: 6, y1: 6, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },
{ x: 'Mar', y: 12, y1: 11, y2: 2 }, { x: 'Apr', y: 15, y1: 16, y2: 2.5 },
{ x: 'May', y: 20, y1: 21, y2: 3 }, { x: 'Jun', y: 24, y1: 25, y2: 3.5 },
{ x: 'Jul', y: 28, y1: 27, y2: 4 }, { x: 'Aug', y: 32, y1: 31, y2: 4.5 },
{ x: 'Sep', y: 33, y1: 34, y2: 5 }, { x: 'Oct', y: 35, y1: 34, y2: 5.5 },
{ x: 'Nov', y: 40, y1: 41, y2: 6 }, { x: 'Dec', y: 42, y1: 42, y2: 6.5 }
];
var chartData2 = [
{ x: 'Jan', y: 3, y1: 3, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },
{ x: 'Mar', y: 6, y1: 1, y2: 2 }, { x: 'Apr', y: 5, y1: 6, y2: 2.5 },
{ x: 'May', y: 10, y1: 11, y2: 3 }, { x: 'Jun', y: 14, y1: 15, y2: 3.5 },
{ x: 'Jul', y: 14, y1: 17, y2: 4 }, { x: 'Aug', y: 22, y1: 21, y2: 4.5 },
{ x: 'Sep', y: 23, y1: 24, y2: 5 }, { x: 'Oct', y: 25, y1: 24, y2: 5.5 },
{ x: 'Nov', y: 20, y1: 31, y2: 6 }, { x: 'Dec', y: 32, y1: 32, y2: 6.5 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Months'
},
primaryYAxis:
{
title: 'Percentage (%)',
labelFormat: '{value}%',
},
series: [
{
type: 'StackingBar', name: 'Apple',
dataSource: chartData1, xName: 'x', yName: 'y', columnSpacing: 0.3
}, {
type: 'StackingBar', name: 'Orange',
dataSource: chartData1, xName: 'x', yName: 'y1', columnSpacing: 0.3
}, {
type: 'StackingBar', name: 'Wastage',
dataSource: chartData1, xName: 'x', yName: 'y2', columnSpacing: 0.3
},
{
type: 'StackingBar', name: 'Apple',
dataSource: chartData2, xName: 'x', yName: 'y',
stackingGroup: 'group2', columnSpacing: 0.3
}, {
type: 'StackingBar', name: 'Orange',
dataSource: chartData2, xName: 'x', yName: 'y1',
stackingGroup: 'group2', columnSpacing: 0.3
}, {
type: 'StackingBar', name: 'Wastage',
dataSource: chartData2, xName: 'x', yName: 'y2',
stackingGroup: 'group2', columnSpacing: 0.3
}
],
title: 'Sales Comparison'
});
chart.appendTo("#container")
Screenshot
