Skip to Content

Hello community, It is already February and this is the first quick break I get from work, it has been busy, so I decided to write this blog because  on the last blog I wrote about a chart library , my friend Mustafa Bensan  suggested for me to look into ui5 viz charts library that is already provided chart library.

My first instinct to learn a new library is by reading the examples, then play with it by copying a sample into my poc project and then modify it to see how it compares with other similar past experiences.


As you know, the initial set up is to get a sapui5 project created – you can see those steps on my prev blog… once you have a blank html, view, controller, and model, files.. Let’s start putting things together with this chart lib, viz charts.

Make sure you include the ilb during your bootstrap step on your html file
* I hate seeing those language errors, and pre load libraries.. So here is a bonus for your next ui5 project **


Once you have your html file setup… then let’s see the xml view. I copied one sample code from the documentation initially working with a column chart, then I included a bar chart, then a line chart, and finally a pie chart… there are others, however, after the first 2… I realized there was a lot of repetition, and also each chart configuration is very similar to one another.


On the next image you can see you can specify the vizType to change your bar/line/column.


Next, on my controller file, I have the following:

* Get a handle of your charts on the onAfterRendering Method (they won’t be ready onInit)

* You may show (when you hover over your measures) either a toolTip you create using JavaScript and connecting it to your chart, or

*(Commented out)  you can show a Popover controller that would show when you click on the measure 


Finally, you can see that the Viz charts share a lot of similar properties.

  • Chart Title – shows a default one, so you can hide or change its text
  • Axis/Category Labels show/hide, format
  • Legend – dimension labels
  • other…


After saving my code, my charts look like


Where else should you pay attention?
When setting up your pie chart xml code

Keep in mind, control ids have to be unique (since i was repeating the same xml code, i had to change the ids – otherwise, the framework will give you an error
If you need to display a tooltip vs a popover, see how the 2 approaches are possible
Tooltip example with javascript from the controller – you need to connect the viz to the tooltip
Popover, you have the xml code in the view then you get a handle of that control before you connect it like


Other things I didn’t include on this blog but could be really good to try would be:

  • Change the color of the measures
  • Add logic to display a color based on a condition, etc.


Final Words:

The Samples section on the sapui5 site has a good sample of what can be done, however, I think the part lacking documentation is the VizProperties.


the viz frame API documentation ideally would cover various properties for this control, but it only shows one property.

I had to dig in various google searches and samples from the Samples page to figure out some of the available properties for the VizFrame. I also attempted the vizFrame.mProperties command from the console, however, it only brought back a few properties that were set to null. I would like have been able to get a more complete list of available Properties on the API page.

This Viz chart lib seems to be very powerful and the best of it is that it is part of the ui5 library which we already have. I look forward to using it on one of my projects coming up again.


Please share your thoughts! Happy weekend!

To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Sergio,

    Thanks for continuing your very interesting charting series.  It makes for a good comparison between the different options.  If you’re keen on continuing, may I suggest that you follow-up with a blog about integrating  Highcharts with UI5?  What makes this combination relevant is that it is used in SAP Analytics Cloud.



    1. Sergio Guerrero Post author

      everything i used in the code is in those screenshots… the xml view, the controller, the index.html file.. and it is very similar to the code from the sapui5 sdk… what else do you need?  anything specific is probably now related to your own scenario – hope you can make it work on your side… or post a question on scn

    1. Sergio Guerrero Post author

      im not sure i understand your question… are you trying to limit your selection of the chart when having multiple charts on the same view? or are you trying to limit the chart section (within the same chart) ?

        1. Sergio Guerrero Post author

          that is default behavior.  once you have set up your chart, data model, and it displays on your browser… you can select it and the viz chart itself will highlight the selected bar (or section of the graph you are clicking on)


Leave a Reply