Intro
The property “autoAdjustHeight” helps to correctly manage the sizes of charts contained in a chart container.
Size
The width and height of the chart container are never defined explicitly by the app. They are always set by the container itself.
- The width of the chart container is always resized to spread 100% of the width of its parent.
- The height of the chart container depends on the property “autoAdjustHeight“, as explained below.
Width
The chart container automatically sets the width of the charts to 100%, regardless of the width manually set to each individual chart. That means when using the chart container, the app cannot change the width of the charts.
Height
You can choose to have the height of the chart automatically adjusted by the chart container, depending on the property autoAdjustHeight.
Use of autoAdjustHeight = false
Always use autoAdjustHeight = false when the charts are embedded in a vertically scrolled page.
When autoAdjustHeight = false, the size of each chart needs to be set manually and the height of the chart container will adapt to the height of each chart.
- For charts that scroll horizontally, use a height in pixel.
- For charts that scroll vertically, use a height in pixel big enough so that there is no vertical scrolling.
Chart in a vertically-scrolled page
Use of autoAdjustHeight = true
Always use autoAdjustHeight = true when the charts are embedded in a frame.
When autoAdjustHeight = true, the height of the chart container is set to 100% of its parent.
Each chart is automatically resized so that it uses 100% of the chart container.
No setting is required on the chart level, since everything is done automatically.
Chart in a frame
Please consider:
- The property autoAdjustHeight = true only works correctly if the page property enableScrolling is set to false.
- Frames can be coded with the SAPUI5 control FixFlex.
For more details refer to the resources below.
Resources
Elements and Controls
- Chart (guidelines)
Implementation
- FixFlex (SAPUI5 samples)
- Chart container (SAPUI5 samples)