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