Show TOC

ChartsLocate this document in the navigation structure

Get information about what UI annotations to visualize data on SAP Fiori UIs.

If you want to visualize data, you can use a chart.

Figure 1: Example of a line chart
You can use the following UI annotation to define the properties of a chart:
  • @UI.chart

    You define this UI annotation at view level. It refers to the elements that are to be used in the chart. Additionally, you can provide a title and description.

    Sample Code
    @UI.chart: {
        title: 'Gross Amount by Customer',
        description: 'Line-chart displaying the gross amount by customer',
        chartType: #LINE,
        dimensions: [ 'CompanyName' ],	-- Reference to one element
        measures: [ 'GrossAmount' ]		-- Reference to one or more elements
    define view ZExample_SalesOrder as select from sepm_cds_sales_order as so {
      key so.sales_order_id as SalesOrder,
      so.customer.company_name as CompanyName,
      so.currency_code as CurrencyCode, 
      @Semantics.amount.currencyCode: 'CurrencyCode'
      so.gross_amount as GrossAmount,