Convert Fiori Donut Chart from Value to Percentage

[Former Member]

I have created a value based donut chart using Fiori elelments:

As the references to percentage on the card indicate I actually want to show the breakdown as % and not absolute values.

The Extension annotation on the CDS view looks as follows:

@Metadata.layer: #CORE

@UI.chart: [
    { 
        qualifier: 'byCostDonutType',
        title: 'By Percentage',
        chartType: #DONUT,
        dimensions: ['CostType'],
        measures: ['Cost'],
        dimensionAttributes: [
            {dimension: 'CostType', role: #CATEGORY}
        ],
        measureAttributes: [ 
            {measure: 'Cost',  role: #AXIS_1, asDataPoint: true}
        ]
     }
]

annotate view ZWM_C_OUTAGE_COSTDONUT_OVP
    with 
{
   @Consumption.semanticObject: 'wmReporting'

   @UI.identification: [{
    type: #FOR_INTENT_BASED_NAVIGATION,
    semanticObjectAction: 'Outage',
    label: 'Display Outage Report'
    }]
    
    MaintenanceOrder;
    @UI.textArrangement: #TEXT_FIRST
    WBSElement;
    @UI.textArrangement: #TEXT_FIRST
    CostType;
    @UI.dataPoint: {targetValueElement: 'TotalCost', visualization: #PROGRESS }
    Cost;
    @UI.textArrangement: #TEXT_FIRST
    TotalCost;    
}   

I have set TotalCost as the TargetValueElement for Cost. Cost is what is displaying on the donut chart and TotalCost is the sum of the 3 Cost types (Actual, Estimated, Planned).

This is not working. How do I get the donut chart to display percentages?

[Andy1]

Hi Jeff,

How did you fulfill this requirement? Could you please kindly share the solution?

Thank you!

[former_member196805]

Please try set plotArea.dataLabel.type to "percentage". Please check Chart Property API DOC for details.

[Former Member]

Thanks for you reply Chapman.

I have added the following plotArea code to my manifest:

	"settings": {
			"title": "{{Card01Title}}",
                        ........    
			"plotArea": {
				"dataLabel": {
					"type": "percentage"
				}
			},

However it has not changed the output.

Am I putting the right thing in the right place? Is there anything else I need to do?

[former_member196805]

Please check https://jsbin.com/kipogapowa/edit?html,output

[Former Member]

The only difference i see is that this code uses the additional "visible" parameter.

I have added this in the manifest:

"plotArea": {
		"dataLabel": {
			"visible": true,
			"type": "percentage"
		}

It still has no impact.

My guess is that you cannot display as percentage using Fiori Elements as the annotations are not passed on to VIZframe level.

[former_member196805]

I don't really know about setting vizframe property using Fiori Elements. If this happen to be the cause, maybe you could pick up the chart instance and set the "type" property after chart rendering accomplishment.