Root

Type class

The root of a chart: it ties the chart to an HTML element and holds its global settings, formatters, locale and themes.

More info: Getting started: root element

Sources

Root can be used (imported) via one of the following packages.

TypeScript

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

// Create Root
am5.Root.new(root, {
  // ... config if applicable
});

JavaScript

<!-- Load Root -->
<script src="index.js"></script>

<script>
// Create Root
am5.Root.new(root, {
  // ... config if applicable
});
</script>

Inheritance

Root does not extend any other symbol.

Root is not extended by any other symbol.

Properties

#autoResize

Type booleanDefault true

Resizes the chart automatically when its container's size changes. With false, call resize() to resize it.

#container

Type Container

The main container: charts and other elements go into its children.

#dateFormatter

Type DateFormatterDefault DateFormatter.new(this, {})

Date/time formatter.

More info: Formatting dates

#defaultRenderer

StaticType IRendererClassDefault CanvasRendererSince 5.21.0

Renderer for Roots that do not set renderer.

#dom

Type HTMLElement

The HTML element the chart is in.

#durationFormatter

Type DurationFormatterDefault DurationFormatter.new(this, {})

Duration formatter.

More info: Formatting dates

#entitiesById

Type objectSince 5.11.0

Objects of this root that have an id setting, by that id.

#events

Type EventDispatcherDefault new EventDispatcher()

Root's event dispatcher.

More info: Events

#fps

Type number | undefined

Maximum frames per second. When not set, the chart renders on every animation frame of the browser.

Each frame waits 1000 / fps milliseconds after the previous one is drawn, then for the screen's next refresh, so the rate achieved is lower:

fps: 30 gives about 20 on a 60 Hz screen.

More info: Root element: performance

#gridLayout

Type GridLayoutDefault GridLayout.new()

A shared GridLayout for a Container's layout setting.

#horizontalLayout

Type HorizontalLayoutDefault HorizontalLayout.new()

A shared HorizontalLayout for a Container's layout setting.

#interfaceColors

Type InterfaceColors

Colors of the chart's interface: text, grid, buttons and other controls.

More info: Colors, gradients, and patterns: interface colors

#locale

Type ILocaleDefault en

Locale for the chart's texts and formatting. English by default.

More info: Locales

#nonce

Type undefined | string

Nonce for the <style> elements the chart adds to the page, for pages with a strict Content Security Policy.

#numberFormatter

Type NumberFormatterDefault NumberFormatter.new(this, {})

Number formatter.

More info: Formatting numbers

#settings

Type IRootSettings

The Root's settings.

#skipRenderFrame

Type booleanDefault false

#systemTooltip

Type TooltipSince 5.14.0

A shared Tooltip (theme tag "system") for interface elements such as the logo and buttons, created on first use.

#tabindex

Type numberDefault 0

Tab index for the whole chart.

More info: Accessibility

#tapToActivate

Type booleanDefault falseSince 5.2.9

Makes touch gestures such as zoom and pan work only after a tap on the chart, so the page can still be scrolled over it.

More info: Root element: touch related options

#tapToActivateTimeout

Type numberDefault 3000Since 5.2.9

How long in milliseconds the chart stays active after the last touch, with tapToActivate, before handing touch gestures back to the page.

0 keeps it active until a tap outside the chart.

More info: Root element: touch related options

#timezone

Type TimezoneSince 5.1.0

Time zone to show dates in, instead of the user's local one. Set it to a Timezone with an IANA name, e.g.

am5.Timezone.new("America/Vancouver"). For UTC, utc is faster.

Every date is converted, which can slow down charts with large data sets.

More info: Root element: time zone

#tooltipContainer

Type Container

The Container tooltips are drawn in, above the chart.

#updateTick

Type boolean

Whether the chart updates and redraws.

Stops the chart from updating and redrawing with false, until set back to true.

#utc

Type booleanDefault false

Treats dates as UTC instead of the user's local time, when formatting and parsing them and when placing date axis grid. It takes precedence over timezone.

More info: Formatting dates: utc and time zones

#verticalLayout

Type VerticalLayoutDefault VerticalLayout.new()

A shared VerticalLayout for a Container's layout setting.

Methods

#dispose()

Returns void

Disposes the Root and everything in it, and removes the chart from the page.

#documentPointToRoot(point: IPoint)

Returns IPoint

Converts a point from viewport coordinates, such as a pointer event's clientX and clientY, to coordinates within the root.

#eachFrame(f: (currentTime: number) => void)

Returns IDisposer

Calls a function on every frame, which keeps the chart rendering, until the returned disposer is disposed.

#focused(target: Sprite)

Returns boolean

Returns true if target is currently focused.

#height()

Returns number

Returns the chart's height in pixels: the container's, or the one from calculateSize if set.

#isDisposed()

Returns boolean

Returns true if the Root is disposed.

#markDirtyGlobal(container?: Container)

Returns void

Makes every element inside a container update and re-measure on the next frame.

#moveDOM(id: string | HTMLElement)

Returns void

Moves the chart to another HTML element and resizes it to fit there.

Nothing happens if no element with that id exists.

#new(id: string | HTMLElement,
settings?: IRootSettings)

StaticReturns Root

Creates a Root in an HTML element. An element can hold only one Root:

creating another one there throws an error, unless am5.registry.autoDispose is true.

#readerAlert(text: string)

Returns void

Makes screen readers read out a message.

More info: Accessibility

#resize()

Returns void

Resizes the chart to fit its container. Call it after the container's size changes when autoResize is false.

#rootPointToDocument(point: IPoint)

Returns IPoint

Converts a point from coordinates within the root to viewport coordinates, as in a pointer event's clientX and clientY.

#setThemes(themes: Array)

Returns void

Sets the chart's themes, replacing any set before.

More info: Themes

#width()

Returns number

Returns the chart's width in pixels: the container's, or the one from calculateSize if set.

Events

Add event handlers to Root object using its events.on() method. Read about adding event handlers.

#frameended

Param { type: "frameended", target: Root, timestamp: number }

A frame finished rendering. timestamp is the frame's time in milliseconds.

#framestarted

Param { type: "framestarted", target: Root, timestamp: number }

A frame started rendering. timestamp is the frame's time in milliseconds.