Skip to Content
Author's profile photo Sergio Guerrero

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!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      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.



      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog Post Author

      yes Mustafa, Highcharts will be my next blog coming up 🙂


      stay tuned!

      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog Post Author

      actually, here it is:

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Thanks Sergio!  You certainly didn't waste any time with the follow-up blog 🙂

      Author's profile photo Amardip Selmokar
      Amardip Selmokar

      Hi  Sergio Guerrero,

      Could you please share the code for above example.

      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog 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

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan


      How to make chart selection as single selection?

      Thank you,



      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog 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) ?

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Hi, The below-pasted content is my question? how to achieve this?



      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog 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)

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      by default it allows me to select multiple bar. i do not want that


      Author's profile photo Joel Plambeck
      Joel Plambeck

      Hi Sergio Guerrero,

      Thank you so much for your blog!

      I'm having trouble binding the data to the chart. I assume, my data structure of the model is not correct.

      Could you include the data structure of the appModel in your blog?

      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog Post Author

      hi Joel,

      i am not able to get the exact code.. but the structure that i used on the appModel would have looked like below.  Do you have any specific errors? what viz graph are you trying to display?

      did you bootstrap the lib ?  and referenced the right graph on the viz chart (xml)

      countries: [
      { Country: 'US', Gold: 10, Silver: 20, Bronze: 30 },
      { Country: 'Canada', Gold: 30, Silver: 20, Bronze: 40 },
      { Country: 'Germany', Gold: 22, Silver: 10, Bronze: 3 }

      hope this is helpful for you

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      Hay Sergio ,

      Nice blog. can you keep some pointers on how to deal with series ? Eg : I have years as dimension and customer as series , having sale value per customer as measure. Something like below .


      Author's profile photo Saluru Srinivasa Rao
      Saluru Srinivasa Rao



      Can you please share your controller code completely, I am missing model part code.


      Thank You.


      Best Regards,

      S Srinivasa Rao.

      Author's profile photo Sergio Guerrero
      Sergio Guerrero
      Blog Post Author

      the code is shown on the image above - what do you need exactly?  do you have specific questions? or errors on your code?

      Author's profile photo Srinivasa Saluru
      Srinivasa Saluru

      I want to see the complete controller code