UI Elements - SAPUI5 Data Visualization Chart (VizFrame) Chart – Toolbar Size of the Chart Container

Updated: June 30, 2021
SAPUI5 Version 1.28

Size of the Chart Container

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

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation