Card Micro Charts

Experimental feature since version 1.80. The API may change.

Micro Charts help you to visualize information in a compact non-interactive manner. They are used to display changes in the data or provide tracking at a glance. Currently supported types for Numeric Header are Bullet, Column, HarveyBall, Line, Radial and StackedBar. Supported types for List Card are Bullet and StackedBar. For more information when to use them read the Fiori Design Guidelines.

Properties

Micro Charts have the following common properties:

Property Type Default Value Required Description Schema Version Since
type "Bullet", "Column", "HarveyBall", "Line", "Radial", "StackedBar" Yes Specifies one of the available micro charts types. See details for every different type below.
Note Only "Bullet" and "StackedBar" are supported in List Card.
Note Since 1.124 all types are supported in Numeric Header. 		1.24 1.80
visible boolean true No Visibility of the micro chart. 1.56.0 1.116

Bullet Micro Chart

Stacked Bar chart
Properties
Property Type Required Description Schema Version Since
value float Yes The actual value. 1.24 1.80
color sap.m.ValueColor No The color of the chart. 1.24 1.80
displayValue string No The value, which is displayed next to the chart. 1.24 1.80
maxValue float No The maximum value. 1.24 1.80
minValue float No The minimum value. 1.24 1.80
target float No The target value. 1.24 1.80
thresholds Threshold[] No The thresholds of the chart. 1.24 1.80
Threshold
Property Type Required Description Schema Version Since
value float Yes The value of the threshold. 1.24 1.80
color sap.m.ValueColor No The color of the threshold. 1.24 1.80

StackedBar Micro Chart

Stacked Bar chart

Note: For this type of chart a legend is also displayed in the card.

Properties
Property Type Default Value Required Description Schema Version Since
bars Bar[] Yes The bars of the micro chart. 1.24 1.80
displayValue string No The value, which is displayed next to the chart. 1.24 1.80
maxValue float No The maximum value. 1.24 1.80
displayZeroValue boolean true No Defines whether bars with zero values are displayed. 1.65 1.126
Bar
Property Type Required Description Schema Version Since
value float Yes The value of the bar. 1.24 1.80
color sap.m.ValueColor No The color of the bar. 1.24 1.80
displayValue string No The display value of the bar. 1.24 1.80
legendTitle string No Title, which will be displayed in the legend. 1.24 1.80

Column Micro Chart

For reference see this sample in the Explore section.

HarveyBall Micro Chart

For reference see this sample in the Explore section.

Line Micro Chart

For reference see this sample in the Explore section.

Radial Micro Chart

For reference see this sample in the Explore section.

Examples

Example of a List card with Bullet micro charts:

{
	"sap.app": {
		"type": "card",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "List",
		"header": {
			"title": "Request list content Card"
		},
		"content": {
			"data": {
				"json": [
					{
						"Name": "Comfort Easy",
						"Description": "32 GB Digital Assistant with high-resolution color screen",
						"Expected": 300000,
						"Actual": 330000,
						"Target": 280000,
						"ChartColor": "Good"
					},
					{
						"Name": "ITelO Vault",
						"Description": "Digital Organizer with State-of-the-Art Storage Encryption",
						"Expected": 230000,
						"Actual": 225000,
						"Target": 210000,
						"ChartColor": "Good"
					}
				]
			},
			"item": {
				"title": "{Name}",
				"description": "{Description}",
				"chart": {
					"type": "Bullet",
					"minValue": 0,
					"maxValue": "{Expected}",
					"target": "{Target}",
					"value": "{Actual}",
					"color": "{ChartColor}"
				}
			}
		}
	}
}

Example of a List card with StackedBar micro charts:

{
	"sap.app": {
		"type": "card",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "List",
		"header": {
			"title": "Request list content Card"
		},
		"content": {
			"data": {
				"json": [
					{
						"Year": 2017,
						"Category": "Computer system accessories",
						"Notebook13": 200,
						"Notebook17": 500
					},
					{
						"Year": 2018,
						"Category": "Computer system accessories",
						"Notebook13": 300,
						"Notebook17": 320
					}
				]
			},
			"item": {
				"title": "Notebooks Distribution",
				"subTitle": "by years",
				"chart": {
					"type": "StackedBar",
					"displayValue": "{= ${Notebook13} + ${Notebook17}}K",
					"maxValue": "{/maxOverYears}",
					"bars": [
						{
							"value": "{Notebook13}",
							"displayValue": "Notebook 13: {Notebook13}K",
							"legendTitle": "Notebook13"
						},
						{
							"value": "{Notebook17}",
							"displayValue": "Notebook 17: {Notebook17}K",
							"legendTitle": "Notebook17"
						}
					]
				}
			}
		}
	}
}
Try it Out