Skip to Content
Technical Articles
Author's profile photo Werner Dähn

UI5 charting library

Today’s UIs must be visually appealing and SAPUI5 does come with charting capabilities.

Note: This is a complete rewrite utilizing the latest amCharts 5 version and a different concept.

In my projects in need much more than that. More types of charts but also more flexibility within each chart. For example a chart like that. To enable this I have created an UI5 control for the amCharts charting engine.

The various approaches

Which chart to use depends on the data and the user intent of the visualization. Tableau, just to use another enterprise grade BI tool as example, provides this guidance. (An even more comprehensive list is shown in the DataVizCatalog.)

The crown of all visualization probably has d3.js.

Looking at these options, there is a ranking between those: SAP ↔ Tableau ↔ d3
It goes from from simple and limited ↔ complex and flexible.

What I am looking for is something that is extremely powerful and flexible but simple to use. With this thought in mind, I have built a UI5 library for the amCharts diagrams. The amCharts library is my favorite charting engine, although it requires quite some coding. But with the combination of UI5 it makes creating fancy charts quite simple.



Essentially the coding becomes describing the chart in the XMLView.

                <CategoryAxis categoryField="year" componentData="{/}" />
                <ValueAxis />


This is then rendered as UI5 control:


The XMLView says, a Chart container should be rendered and it consists of a single XYChart, a thing that has two axes aggregations and a series aggregation. The xAxis should be a category and the labels come from the year property of the UI5 model. The yAxis is a ValueAxis which can be any number.

Within this XYChart should be three LineSeries with the same data binding but different settings for the valueYField. The values of all three should be stacked.


This is a different concept!

The SAPUI chartViz “Combined Column and Line Chart” would specify the chart type.

<viz:VizFrame vizType='combination' />


The approach of amCharts and this UI5 library is to build each chart out of its base elements. Above Combination-Chart is a XYChart with a LineSeries and a ColumnSeries. Or more series elements like a SmoothedXLineSeries, a Series with Bullets, … All series on the sames axis or different axes. The axes rendered in the same area or occupying non-overlapping areas, ….

This allows for very interesting visualizations. My favorite from the top is a visualization of an entire year, all 365 data points plus weekly totals. Now we know how that chart was created. It is a RadarChart with a circular DateAxis. The yAxis aggregation has an inner ValueAxis for the weekly totals and an outer CategoryAxis for the Mon-Sun range. The series aggregation consists of a ColumnSeries bound to the inner yAxis and a Series with Bubbles bound to the outer axis.

Additionally the DateAxis got Ranges to indicate the months.


Part of the AppContainer project

This UI5 library is part of the AppContainer project and available here:

Examples and demos of concepts are found here:


Assigned Tags

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

      Thanks for sharing. This charting library certainly looks beautiful!

      You might want to indicate the license required to use the library. From a first glance it seems there is no free option.

      Author's profile photo Werner Dähn
      Werner Dähn
      Blog Post Author

      You can download and use all amCharts 5 products for free. The only limitation of the free version is that a small amCharts logo will be displayed in the corner of your charts. If you’d rather have your charts without any branding, or you appreciate the software and would like to support its creators, please purchase a commercial license.

      Author's profile photo Pieter Janssens
      Pieter Janssens


      Author's profile photo Olaf Theiß
      Olaf Theiß

      The library looks really interesting.

      Is it possible to build charts like a „Monte Carlo Simulation“?

      Especially showing reference lines parallel (!) to the chart columns (CategoryAxis) is an important issue. There is no chance to realize it in SAPUI5. But I can’t also find any examples in your library.

      Is there an option to fit the chart designs to the IBCS Standard?

      Thank you!