Angular ChartsLayout

This section explains how the chart and its components are sized and laid out within the available space.

Chart Size

The chart will auto-size by default, taking the size of the container element and auto-sizing the chart dynamically. Use the width and/or height options if a fixed size is required.

If auto-sizing is used for one or both dimensions, the chart will have a minimum width and height of 300px. Set minHeight: 0 and/or minWidth: 0 to effectively remove this constraint.

The chart never affects the size of the container element.

A <div> element is commonly used for the container, and the default height for this element is 0px. You should explicitly manage the browser calculated container element size to achieve the dynamic size you require.

Size Changes

The chart monitors the size of the container element, and resizes dynamically.

When the chart size changes, the layout process is performed for the new available canvas space. Most components are typically a fixed size, so usually it is the series-area which shrinks or grows, with the other components moving around or adjusting alignment.

Chart Layout Calculation

Chart Layout

Each chart is composed of a single or multiple series, and optionally a Legend, Axes, and captions, such as title, subtitle and footnote. All of these components are managed by the chart's layout engine. They are sized and positioned appropriately based on the chart's dimensions, the nature of the data and the configuration.

Components are laid out in the following order; earlier elements take up space that is then unavailable for the layout of later elements:

  • Chart padding.
  • Title plus its configured spacing.
  • Subtitle plus its configured spacing.
  • Footnote plus its configured spacing.
  • Legend plus its configured spacing.
  • Toolbar.
  • Navigator plus its configured spacing.
  • Series area padding.
  • Axes.
  • Series area.

If any elements are disabled or not used, they do not consume any space during layout processing.

Chart Padding

padding configuration is applied first, ensuring a clear boundary of all other components from the edge of the canvas. Space is consumed on all sides of the available area based upon the padding configuration.

Title

title configuration applies next, horizontally centring on the remaining space and consuming the height of the title and its additional title.spacing.

Subtitle

subtitle configuration applies next, horizontally centring on the remaining space and consuming the height of the subtitle and its additional subtitle.spacing.

Footnote

footnote configuration applies next, horizontally centring on the remaining space and consuming the height of the footnote and its additional footnote.spacing at the bottom.

Legend

legend configuration is applied to the remaining space. The exact space consumed depends on how the Legend is configured.

legend.spacing can be used to adjust the space between the Legend and later components.

Toolbar

The Toolbar is then placed next, taking up a fixed amount of space.

navigator configuration is applied next. The exact space consumed depends on how the Navigator is configured.

navigator.spacing can be used to adjust the space between the Navigator and later components.

Series Area Padding

seriesArea.padding configuration is applied. It can be used to avoid the overlapping of series items with Legend, title and Axes labels.

Axes

axes layout is then calculated based upon the remaining space and how the Axes are configured.

Series Area

All remaining space is then dedicated to rendering of the configured series options.