Category / Section
How to render horizontal stacked bar chart
2 mins read
How to create horizontal stacked bar chart?
Horizontal stacked bar charts are charts with Y values stacked over one another in the series order. They show the relation between individual values and the total sum of the points.
Let’s see how to create simple stacked bar chart in java script.
Step-1: Adding Script file
First, you should create an HTML file like stackedBar.html and then include the ej2.min.js script file in the head tag. It contains all the 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 the chart to render.
stackedBar.html <html> <body> // Chart container <div id="container"></div> </body> </html>
Step-3: Creating the chart
Here are the steps for creating the chart:
- You should create a 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 data values using the dataSource property in the series.
- Bind the x and y values of data source with xName and yName properties
- You can select chart types using the type property in the series.
- 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>
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
majorGridLines: { width: 0 }
},
chartArea: {
border: {
width: 0
}
},
//Initializing Primary Y Axis
primaryYAxis:
{
lineStyle: { width: 0},
majorTickLines: {width: 0},
labelFormat: '{value}%',
edgeLabelPlacement: 'Shift'
},
//Initializing Chart Series
series: [
{
type: 'StackingBar',
dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 12 }, { x: 'Apr', y: 15.5 },
{ x: 'May', y: 20 }, { x: 'Jun', y: 24 }],
name: 'Apple',
xName: 'x', width: 2,
yName: 'y'
},
{
type: 'StackingBar',
dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 11 }, { x: 'Apr', y: 16 },
{ x: 'May', y: 21 }, { x: 'Jun', y: 25 }],
name: 'Orange',
xName: 'x', width: 2,
yName: 'y'
},
{
type: 'StackingBar',
dataSource: [{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1.5 }, { x: 'Mar', y: -2 }, { x: 'Apr', y: -2.5 },
{ x: 'May', y: -3 }, { x: 'Jun', y: -3.5 }],
name: 'Wastage', width: 2,
xName: 'x',
yName: 'y'
}
],
//Initializing Chart title
title: 'Sales Comparison',
tooltip: {
enable: true
},
});
chart.appendTo("#container")
Demo: Stacked Bar
