Skip to Content

Stacked Bar/Column chart example using VizFrame in UI5.

Stacked bar charts are used to display information about the sub-groups that make up the different categories. In stacked bar charts the bars representing the sub-groups are placed on top of each other to make a single column, or side by side to make a single bar. The overall height or length of the bar shows the total size of the category while different colors or shadings are used to indicate the relative contribution of the different sub-groups.


JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the model folder of the application.

Specify the data in the JSON file as below:

"items" : [
                 "Year": "2012",
                 "Milk": "20",
                 "Sugar": "5",
                 "Tea": "5"
                 "Year": "2013",
                 "Milk": "30",
                 "Sugar": "10",
                 "Tea": "10"
                 "Year": "2014",
                 "Milk": "35",
                 "Sugar": "15",
                 "Tea": "15"
                 "Year": "2015",
                 "Milk": "60",
                 "Sugar": "20",
                 "Tea": "20"
                 "Year": "2016",
                 "Milk": "70",
                 "Sugar": "40",
                 "Tea": "40"

To access the above JSON file throughout the application, specify the JSON file URI in the model under sap.ui5 section in the manifest.json file. we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model as shown below.

"sap.ui5": {
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "Dual_Bar_Chart.i18n.i18n"
			"Data": {
				"Data": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/Data.json"
		"resources": {
			"css": [{
				"uri": "css/style.css"

In the view define a Vizframe chart of type Stacked Bar by using the required namespace xmlns:viz=”sap.viz.ui5.controls”.

<viz:VizFrame  xmlns="sap.viz" id="idStackedChart"  vizType="stacked_bar" width="100%" height="100%">


In the init() function of the Controller set up the data for the chart using measures and dimension.

In our example I have taken Year as the Dimension,

Milk, Sugar and Tea as measures.

onInit: function() {
var sampleDatajson = new sap.ui.model.json.JSONModel("model/Data.json");
			var oVizFrame = this.getView().byId("idStackedChart");
				plotArea: {
					colorPalette: d3.scale.category20().range(),
					dataLabel: {
						showTotal: true
				tooltip: {
					visible: true
				title: {
					text: "Stacked Bar Chart"
			var oDataset = new{
				dimensions: [{
					name: "Year",
					value: "{Year}"

				measures: [{
					name: "Milk",
					value: "{Milk}"
				}, {
					name: "Sugar",
					value: "{Sugar}"
				}, {
					name: "Tea",
					value: "{Tea}"

				data: {
					path: "/items"


			var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Milk"]
				oFeedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Sugar"]
				oFeedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Tea"]

oFeedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "categoryAxis",
					"type": "Dimension",
					"values": ["Year"]




The Output Displays all three 3 items sold in a particular year differentiated by color of the bar.

The total items sold in a particular year is displayed at the end of the bar.

Selecting the category at the right top displays the chart as shown below.


Clicking the particular bar, the data will be displayed as below.


Note: To display the same Data in form of stacked Column Chart, vizType stacked_column can be used instead of stacked_bar in the view.

You must be Logged on to comment or reply to a post.
  • Hi, I am currently working on Viz Frame chart and I am facing problem in representing value in x-axis. my chart data values are like - 0.22, 0.09, 0.07 ,0.05 etc and I want this value to be represented on x-axis in scale - 0.1,0.2,0.3,0.4 ..... so on. However when I put this value I am getting x-axis as  10M, 20M , 30M .. so on. Can you help on this.

    • Hi Amit,

      i tried with the same values as you mentioned and i got proper scale like 0.5, 1, 1.5, 2 so on.

      you can try adjusting the width of the frame or else try the below code it worked for me


      var oVizFrame = this.getView().byId("idStackedChart");






      maxValue:1 }



  • Hi Navya ,

    I'd like to thank you for this topic ,

    Actually , I was wondering if there is a way to bind  FeedItem with setModel


    var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({ "uid": "valueAxis", "type": "Measure", "values": ["Milk"] }),


    Best Regards,


  • Really great example of how to achieve a good looking chart very simply.

    Is there a way you know of to add a Target value to a stacked chart as you can do with the bullet chart?






  • Thanks Navya for such a wonderful post.

    How can I fetch the data from Odata source??

    Added my data source in SAP web IDE and tried the below code in controller.js

    var oModel = new sap.ui.model.odata.v2.ODataModel("/sap/opu/odata/SAP/ZGW_SUPPLIER_OVERVIEW_SRV/");

    No Data is the output

    Best Regards,


  • Hello,

    I am facing an issue with binding of viz chart . when i tried to show only viz chart , i was getting the chart . but when i added a selection scren above viz chart and on click of go button ,my viz chart is not coming with invalid data error . complete details of the logic and error are mentioned in the below thread. can someone please help


  • Hi Navya,

    Thank you for the great blog, It was too helpful

    Actually I have one issue that is, in my case I am having multiple measures, with a dimension, my requirement is to add different data label properties for each measures, Is it possible to achieve this?