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. Shows the relation between individual values to 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 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
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 data 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.
- 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
