The smart chart is fully responsive It uses the overflow toolbar control, which is a container based on sap.m.Toolbar and which provides overflow when its content does not fit in the visible area. The text button ‘Details‘ will never overflow as it has a central function.

The header area contains the title of the smart chart, variant management, and the toolbar itself. All of these elements are optional.
The chart area shows the corresponding chart.

1. Title and/or variant management: The title provides a short, meaningful summary of the content of the chart. Use the variant management control only if the user needs to save and load different filter settings and views of the chart.

2. Breadcrumb: The interactive breadcrumb offers a history of the drilldowns made by the user, providing the possibility to return to the previous views of the chart.

3. Drill/Details buttons: There are two possibilities to drill down in the chart:

• The Drill up/down arrow icon buttons that come by default with the chart.
• The Drill Down/Details button (recommended) – When no data points are selected the, Drill Down button shows a list with possible dimensions. If one or more data points are selected, this button offers a popover summarizing the selected data points and navigation to detailed information, as well as a drilldown.

4. Legend: The icon button toggles the legend on and off.

5. Zoom in/out – The two icon buttons zoom in and out. Zooming increases or decreases the data points and this way offers more or less data points on one view.

6. Download – This button downloads the current view of the chart.

7. Chart personalization – In some cases a personalization dialog might be necessary to offer chart dimension visibility or sorting and filtering of data points. For more information, see the P13n-Dialog.

8. Full screen: The icon button toggles the full screen view.

9. Chart type switch: The icon button offers a popover with different available chart types.

10. Tooltip: Shows information about the data point on hover.

The details popover gives detailed information for each selection made in the chart. The number of selections is shown in brackets.

1. The Details button shows all detailed information on all selections.
2. Clicking on an item/selection in the popover shows the semantic navigation (smart links) related to the selection. In the example below, the information is divided into two groups.
3. The semantic navigation information for the selected group (Name) is shown.