Skip to main content
A basic element that can have child elements, maintain their layout, and have a background. Container extends Sprite and can have any Sprite element as a child, from very basic shapes to full-fledged charts.

​
Creating a Container

import * as am5 from "@amcharts/amcharts5";

const container = am5.Container.new(root, {
  width: am5.percent(100),
  height: 200,
  layout: root.verticalLayout
});
See Containers for more info.

​
Properties

​
children

​
children
Children<Sprite>
List of Container’s child elements
container.children.push(am5.Label.new(root, {
  text: "Hello"
}));

​
Padding

​
paddingLeft
number
default:0
Left padding in pixels
​
paddingRight
number
default:0
Right padding in pixels
​
paddingTop
number
default:0
Top padding in pixels
​
paddingBottom
number
default:0
Bottom padding in pixels

​
Layout and Background

​
layout
Layout | null
A method to layout children
See Layout for more info.
​
background
Graphics
Background element
See Background for more info. 
container.set("background", am5.Rectangle.new(root, {
  fill: am5.color(0xff0000)
}));

​
Masking

​
mask
Graphics | null
An element to use as a container’s mask (clipping region)
See Masks for more info.
​
maskContent
boolean
If set to true all content going outside the bounds of the container will be clipped

​
Interactivity

​
interactiveChildren
boolean
If set to true all descendants will become “interactive”

​
States

​
setStateOnChildren
boolean
If set to true, applying a state on a container will also apply the same state on its children
See States for more info.

​
Scrolling

​
verticalScrollbar
Scrollbar
Setting this to an instance of Scrollbar will enable vertical scrolling of content if it does not fit into the Container
See Scrollbar for more info.

​
Other

​
reverseChildren
boolean
If set to true its children will be laid out in opposite order
​
html
string
HTML content of the container
See HTML content for more info.

​
Methods

​
innerWidth()

Returns container’s inner width (width without padding) in pixels.
​
width
number
Inner width in pixels
const innerWidth = container.innerWidth();

​
innerHeight()

Returns container’s inner height (height without padding) in pixels.
​
height
number
Inner height in pixels
const innerHeight = container.innerHeight();

​
contentWidth()

Returns width of the container’s content in pixels.
​
width
number
Content width in pixels
const contentWidth = container.contentWidth();

​
contentHeight()

Returns height of the container’s content in pixels.
​
height
number
Content height in pixels
const contentHeight = container.contentHeight();

​
walkChildren()

Executes a callback function for each child element recursively.
​
callback
(child: Sprite, index?: number) => void
required
Function to execute for each child
container.walkChildren((child, index) => {
  console.log(`Child ${index}:`, child);
});

​
eachChildren()

Executes a callback function for each direct child.
​
callback
(child: Sprite) => void
required
Function to execute for each child
container.eachChildren((child) => {
  child.set("visible", true);
});

​
allChildren()

Returns an array of all children including background, scrollbar, and mask.
​
children
Array<Sprite>
Array of all children
const allChildren = container.allChildren();
console.log("Total children:", allChildren.length);

​
scrollToChild()

If scrolling is enabled on the Container, scrolls in such way that target element becomes visible.
​
child
Sprite
required
Target child element
container.scrollToChild(targetSprite);

​
Examples

​
Creating a Container with Layout

const container = am5.Container.new(root, {
  width: am5.percent(100),
  height: am5.percent(100),
  layout: root.verticalLayout
});

container.children.push(am5.Label.new(root, {
  text: "First item"
}));

container.children.push(am5.Label.new(root, {
  text: "Second item"
}));

​
Container with Background and Padding

const container = am5.Container.new(root, {
  paddingTop: 20,
  paddingRight: 20,
  paddingBottom: 20,
  paddingLeft: 20,
  background: am5.Rectangle.new(root, {
    fill: am5.color(0xeeeeee),
    fillOpacity: 0.5
  })
});

​
Container with Scrollbar

const container = am5.Container.new(root, {
  width: 300,
  height: 200,
  layout: root.verticalLayout,
  verticalScrollbar: am5.Scrollbar.new(root, {
    orientation: "vertical"
  })
});

// Add many children
for (let i = 0; i < 20; i++) {
  container.children.push(am5.Label.new(root, {
    text: `Item ${i + 1}`
  }));
}

Build docs developers (and LLMs) love

Get started for freeTalk to us