cancel
Showing results for 
Search instead for 
Did you mean: 
Read only

old: Fiori elements - how to display lables on a column micro chart

mHambach
Explorer
0 Likes
1,097

Hi out there,
I'm new to Fiori and making my first experiences with Fiori elements.
The first project is a customer view (List Report/Object Page).
Among others, i included a ColumnMicroChart as a header facet, showing the balance of the customer.

The problem is: I did not achiev to diplay labels.... neither for the dimension (x-axis) nor for the values...

I included the chart/datapoint-annotations in the CDS view:

@ui.chart: [{
    qualifier:'balanceChart',
    title:'Offene Posten',
    description:'Saldo pro Belegart',
    chartType:#COLUMN,
    dimensions:['blart'],
    dimensionAttributes:[{ dimension:'blart', role:#CATEGORY }],
    measures:['balance'],
    measureAttributes:[{ measure:'balance', role:#AXIS_1, asDataPoint:true }]
    }]
define view ZCDS_BLART_BAL_CHART as select from ZCDS_BLART_BALANCE
{
@@UI.lineItem:[{ position:10 }
key gpart,
@ui.lineItem:[{ position:20 }]
@ui.dataPoint:{ title:'BLART', qualifier:'blart' }
key blart,
@ui.lineItem:[{ position:30 }]
@ui.dataPoint:{ title:'Saldo', qualifier:'balance', criticality:'balanceCriticality' }
@Semantics.amount.currencyCode: 'Currency'
balance,
@ui.lineItem:[{ position:40 }]
@Semantics.currencyCode:true
currency,
@ui.lineItem:[{ position:50 }]
case when balance < 0 then 3
when balance > 0 then 1
else 0
end as balanceCriticality
}

The result looks like this:
     mHambach_0-1723183283758.png

I have been searching the whol web, reading a lot about Micro Charts. There are a lot of Column Charts with labels, but I did not find a single hint about how to display values....

Hopefully, anybody can help me with this issue...

Thanks a lot in advance.
Beste regards from Germany
Matthias

Accepted Solutions (0)

Answers (2)

Answers (2)

mHambach
Explorer
0 Likes

Hi umasaral,

thanks so much for your answer...

I don't habe the "showDataLabel:true" option. It is marked red and gives me an error....

Have been searching for this and found, that you can inlcude it in the manifest.json - still does not work...

        "pages": {
          "ObjectPage|bp_main": {
            "entitySet": "bp_main",
            "defaultLayoutTypeIfExternalNavigation": "MidColumnFullScreen",
            "component": {
              "name": "sap.suite.ui.generic.template.ObjectPage",
              "list": true,
              "settings": {
                  "chartSettings": {
                      "showDataLabel": true
 
Might this be a version issue?
Best regards, Matthias
umasaral
Contributor
0 Likes

Hi 

To display labels on the ColumnMicroChart, you need to ensure the following:
Include the @ui.lineItem annotation for dimensions and measures to define how they should be displayed.
Add showDataLabel:true to display labels on the chart.

Example CDS view configuration with labels:
@ui.chart: [{
qualifier:'balanceChart',
title:'Offene Posten',
description:'Saldo pro Belegart',
chartType:#COLUMN,
dimensions:['blart'],
dimensionAttributes:[{ dimension:'blart', role:#CATEGORY }],
measures:['balance'],
measureAttributes:[{ measure:'balance', role:#AXIS_1, asDataPoint:true, showDataLabel:true }]
}]
define view ZCDS_BLART_BAL_CHART as select from ZCDS_BLART_BALANCE
{
key gpart,
@ui.lineItem:[{ position:20 }]
@ui.dataPoint:{ title:'BLART', qualifier:'blart' }
key blart,
@ui.lineItem:[{ position:30 }]
@ui.dataPoint:{ title:'Saldo', qualifier:'balance', criticality:'balanceCriticality' }
@Semantics.amount.currencyCode: 'Currency'
balance,
@ui.lineItem:[{ position:40 }]
@Semantics.currencyCode:true
currency,
@ui.lineItem:[{ position:50 }]
case when balance < 0 then 3
when balance > 0 then 1
else 0
end as balanceCriticality
}

These adjustments should enable the display of labels on your ColumnMicroChart.

mHambach
Explorer
0 Likes
Hi umasaral,