Charts

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:

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,

  ...
}