Intro
Usage
Use the radial micro chart if:
- You want to display a single value in a table.
- You want to show a percentage value; the proportion of the total is always calculated and displayed as a percentage.
- You want to emphasize the visualization; the circular shape is more prominent.
- You want to use colors from the chart color palettes.
Do not use the radial micro chart if:
- You want to display a single value in the form of a fillable shape or group of shapes that describe their context. Use the status indicator instead.
- You want to make it easier to compare better two or more values visually. Use the progress indicator instead.
- You want to display custom values and not only percentages. Use the progress indicator instead.
Responsiveness
The radial micro chart is fully responsive. The size adjusts dynamically based on the dimensions of the parent container. In addition, there are four fixed sizes: L, M, S and XS. Each fixed size is a snapshot of the fully responsive micro chart for specific dimensions.
Radial micro chart - Size L
Radial micro chart - Size M
Radial micro chart - Size S
Radial micro chart - Size XS
You can use size XS to embed the radial micro chart in the cells of a grid table, analytical table, or tree table (also in condensed mode). Left-align the radial micro chart in the table cell.
Radial micro chart in size XS in a grid table
Maximum and Minimum Sizes
The radial micro chart can have the following dimensions:
If the chart height is less than 56 px, only the slice label is visible.
Components
Labels
If the micro chart is smaller than size S, the label moves to the right (outside the radial chart). If there is no space to the right of the chart, no label is displayed.
Radial micro chart - components
Resources
Elements and Controls
- Micro Chart (guidelines)
- Color Palette (guidelines)
- Chart Types (guidelines)
Implementation
- Radial Micro Chart (SAPUI5 samples)
