Skip to Content
Author's profile photo Sergio Guerrero

Highcharts on ui5

Hello again community, and welcome back to my third blog on the series of different chart libraries I have incorporated into a #sapui5 application.

1) My first blog was on ChartJS.

2) The second blog about the Viz charts library that is native to sapui5.

On this blog, I am going to showcase how to integrate Highcharts chart into a sapui5 application. One interesting thing about #Highcharts I was not aware of and Mustafa Bensan mentioned to me is that they are a part of the SAP Analytics cloud, so I hope this blog is helpful for developers on both areas.


on my next blog – i will show you some of the common Highchart events – read it here


First and most importantly, I want to mention that I used a free evalutation license for Highcharts. There are some other licenses that have a cost associated depending on the number of developers, etc.. I am not going to go into detail of the license since I used one for evaluation purposes only.

** make sure you look up the various license scenarios and decide if one of them is fit for your orgnaization **

Secondly, I would like to thank Highcharts for the awesome documentation they have. By far, they showcased the most accurate and complete documentation, as well as their API showing the object hierarchy.
I am really impressed at the ways it was explained and how it shows a lot of the details like this one:

Documentation like the one above simplifies the life of the developer and further speeds up the developing cycle due to that developers do not need to spend hours and hours trying to see what are the available properties for specific controls. (I mentioned this as one of the negative experiences I had on the lack of documentation from the viz charts under the Samples section)

Additional features for the Highcharts include the 3D charts – these look really awesome! check them out!
Other types of charts are also available: Polar Charts, spiderweb chart, vector plot, pyramid, … and the list goes on and on. There are a lot of really good examples, please check the demo section of this site.

The steps to make this happen are the following:
1) I used a reference to a CDN (content delivery network) to get the highcharts library … make sure you read the license agreements as this is not a free license.*

2) add a div that will contain your chart into your view. * You can also programatically add charts into your application in case you need to add these charts dynamically.

3) in your controller, set up the configuration for your HighChart. Notice the easiness of how to set up the HighChart object..
HighChart(‘<ID_OF_DIV>’, options);

** options – is the object you need to set up that contains the configuration of your chart, such as: chart type, title, labels, axis, data (series), etc. Most charts have similar configuration, however, make sure to check out the available options for the chart you are trying to

once you have your index, view, and controller set up, run your app and you will see your Highchart in action – this is what the demo HighChart looks for me on my ui5 app



Other great features you can use while using Highcharts is that you can capture event interaction such as mouse clicks for a drill down, etc. You may wonder what use cases this would have? well, in my case, I am using a chart to display aggregated data, then with the drill down, i can show detailed data either with another chart or even with a combination of a chart and a table. Such type of scenario is very common on analytic applications and it does not take much more effort to satisfy a requirement like this and really impress your end users.

Although short, I hope this blog has helped some of you to understand another available type of charting library out there. Please share the blog, and any comments you may have.


Thank you for your time!

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 the detailed blogs on this topic.  In order to make such charting libraries reusable and standalone within UI5, what do you think about defining them as custom UI5 controls as per the examples below?





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

      that would be a good thing to do 🙂  I will consider this for my next blog .... it may take a little longer than my quick turnaround from yesterday 🙂


      thanks for the suggestion Mustafa!

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

      Michael Appleby - how can I send you a message?  re: the spanish version of the blog -thanks in advance


      Author's profile photo Michael Appleby
      Michael Appleby

      Hi Sergio,

      I sent you a Direct Message.  Check in your Notifications or go to

      Cheers, Mike

      Author's profile photo Markus Wagner
      Markus Wagner

      Hi Sergio,

      just a short feedback as a comment on this topic, because of no other ui5/highcharts related posts/blogs in the www ?


      We developed a dashboard-solution using WebIDE / HighCharts / UI5, with 5 Tabs and 4-6 charts on each tab. The data is consumed by oData-services, which are based on BW queries. For a easy-to-use implementation of Highcharts, we build a wrapper class for the highcharts library, which provides the standard-function as createChart/SetData/click-events ….
      This wrapper was again wrapped in an own ui-control, so that it could be used in xml-views also.

      In comparison, the dashboard was also implemented using Lumira Designer, with nearly the same features and the with the standard viz-charts.

      The pros of using the ui5-implementation and not Lumira are very impressive (just to point some out):

      • Lumira needs around 20-30sec until everything is loaded and renderd: ui5 around 2-3
      • Tooltips could be defined as html-tags, which gives a lot of flexibility
      • Chartgeneration is very lightwheight
      • Colorpalettes could be defined as the CI need it, whithout sideeffects
      • AND: the developmenttime was nearly the same
        • because: getting tricky things to work in lumira are very timeconsuptioning
        • in ui5 you are free to do everything JS is providing us




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

      thank you for your message/feedback Markus. I couldn't agree more with you that building these wrappers allow for scalability and reusability via JS. I really appreciate your feedback/comment on the blog. I also saw that Highcharts has by far the best documentation. Cheers to Highchart on that! i like the observations you mentioned here on your findings.