Card Microcharts

Experimental feature since version 1.80. The API may change.

Microcharts 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 are Bullet and StackedBar. They can be embedded in a List card. For more information when to use them read the Fiori Design Guidelines.

Properties

Microcharts have the following common properties:

Property Type Required Description Schema Version Since
type Bullet, StackedBar Yes Specifies one of the available microchart types. See details for every different type below. 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

Bullet Microchart

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
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 Microchart

Stacked Bar chart

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

Properties

Property Type Required Description Schema Version Since
bars Bar[] Yes The bars of the microchart. 1.24 1.80

Bar

Property Type Required Description Schema Version Since
value float Yes The value of the bar. 1.24 1.80
color sap.m.ValueCSSColor 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

Examples

Example of a List card with Bullet microchart:

{
	"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 microchart:

{
	"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