Card Microcharts
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

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

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