Category / Section
How to create stacked bar chart with multiple series?
1 min read
Stacked bar charts are charts with Y values stacked over one another in the series order. Shows the relation between individual values to total sum of the points.
Let’s see, how to create simple stacked bar chart with multiple series in java script.
Step-1: Adding Script file
First, you should create html file like stackedBar.html and then include ej2.min.js script file in head tag. It contains all dependencies 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 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
