Skip to Content

sapui5 Viz Charts examples

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!

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