Skip to Content
Author's profile photo Former Member

Using MAKit Charts in SAP MII for mobile/tablet use

MAKit Chart

is a UI5 control that provides charting features. It has unique features such as Value Bubble and Range Selector that make chart report much more rich and interactive. It supports touch interaction on mobile devices such as:

1.tap to highlight certain part of the chart.

2.double tap.


4.two finger pince to zoom in or out. finger drag to move chart’s Value Bubble highlight.

6.two finger swipe to scroll the chart when zoomed in.

Currently sap.makit.Chart supports the following types of charts:


2.Horizontal Bar(Table Bar)





7.Waterfall Column

8.Waterfall Bar

9.Stacked Column

10.100% Stacked Column

The Chart’s Value Bubble provides an interactive way of showing details of the chart. It provides detailed information (i.e. the value) of the currently highlighted chart region. User can also hide/show certain series of the chart by toggling the legends on the Value Bubble.

The Chart’s Range Selector gives an overview look of the whole chart to user and also allows them to zoom in or out to a specific part of the chart for more clarity.

MAKit BAR chart

Quick Coding to get above

Need to Use sap.makit Library

var oChartj = new sap.makit.Chart({

    height: “80%”,

    width: “100%”,

    category : new sap.makit.Category({ column : “yearCategory” }),

    series : new sap.makit.Series({ column : “productSeries” }),

    values : [new sap.makit.Value({ expression : “revenueValue”, format : “currency” })]


var testData = {

    mycollection : [

          { year : 2008, product : “Prod 1”, revenue : 900000 },

        { year : 2008, product : “Prod 2”, revenue : 700000 },

        { year : 2009, product : “Prod 1”, revenue : 100000 },

        { year : 2009, product : “Prod 2”, revenue : 900000 },

        { year : 2010, product : “Prod 1”, revenue : 110000 },

        { year : 2010, product : “Prod 2”, revenue : 120000 }



var jsonModel = new sap.ui.model.json.JSONModel();


oChartj.addColumn(new sap.makit.Column({name:”yearCategory”, value:”{year}”}));

oChartj.addColumn(new sap.makit.Column({name:”productSeries”, value:”{product}”}));

oChartj.addColumn(new sap.makit.Column({name:”revenueValue”, value:”{revenue}”, type:”number”}));



Small Changes need for XML Model (typically used in SAP MII)

var oModel = new sap.ui.model.xml.XMLModel();






Quick Code Understanding in the 🙂 way

Thanks Dipankar Saha and Bibhas Das for inspiring me write this blog.Hope this will help everyone.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Dipankar Saha
      Dipankar Saha


      Excellent blog on MAKit chart for which I was not able to find any example code snippet so far. This will be very helpful for anyone using UI5 for mobile.

      I like the presentation style of your blog. A very good start for your first blogging in SCN. Please do write more.



      Author's profile photo Former Member
      Former Member

      Good Job Sudipta !! It is really very helpful.

      Author's profile photo Former Member
      Former Member

      Helpful information. Very Good Job, Sudipta.

      Author's profile photo Former Member
      Former Member

      Nice one and very helpful.

      Author's profile photo Former Member
      Former Member

      Very nice article. Il like MAKIt much more than VIZ but viz charts are everythere.

      Do you know why MAKIT is not often used in the examples? Is it depreciated? Is VIZ really better? Why?

      Author's profile photo Former Member
      Former Member

      Thank for this simple and clear example. It was very helpful.

      Just a comment since I ran into an issue with the series in my application and it might occur to someone else. You need to ensure that your data collection is sorted by the Category, if not the series won't work.

      Thanks again!

      Author's profile photo Vevek Pj
      Vevek Pj

      Helpful article. Is there any explored sample codes for makit charts. I would like to have a line graph, where should i refer. Please provide some suggestions.Thanks!