Root – amCharts 5 Documentation

Type class

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

Sources

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

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

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

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

Settings

Root does not have any settings.

Private settings

Root does not have any private settings.

Properties

autoResize #	Type `boolean` Default `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 `DateFormatter` Default `DateFormatter.new(this, { })` Date/time formatter. Click here for more info
defaultRenderer #	Static Type `IRendererClass` Default `CanvasRenderer` Renderer for Roots that do not set `renderer`. @since 5.21.0
dom #	Type `HTMLElement` The HTML element the chart is in.
durationFormatter #	Type `DurationFormatter` Default `DurationFormatter.new(this, { })` Duration formatter. Click here for more info
entitiesById #	Type `object` Objects of this root that have an `id` setting, by that `id`. @since 5.11.0
events #	Type `EventDispatcher` Default `new EventDispatcher()` Root's event dispatcher. Click here for more info
fps #	Type `number` \| `undefined` Maximum frames per second. When not set, the chart renders on every animation frame of the browser. Click here for more info
gridLayout #	Type `VerticalLayout` Default `GridLayout.new()` A shared `GridLayout` for a `Container`'s `layout` setting.
horizontalLayout #	Type `VerticalLayout` Default `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. Click here for more info
locale #	Type `ILocale` Default `en` Locale for the chart's texts and formatting. English by default. Click here
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 `NumberFormatter` Default `NumberFormatter.new(this, { })` Number formatter. Click here for more info
settings #	Type `IRootSettings` The Root's settings.
skipRenderFrame #	Type `boolean` Default `false`
systemTooltip #	Type `Tooltip` A shared `Tooltip` (theme tag `"system"`) for interface elements such as the logo and buttons, created on first use. @since 5.14.0
tabindex #	Type `number` Default `0` Tab index for the whole chart. Click here for more info
tapToActivate #	Type `boolean` Default `false` 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. Click here for more info @since 5.2.9
tapToActivateTimeout #	Type `number` Default `3000` 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. Click here for more info @since 5.2.9
timezone #	Type `Timezone` 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. Click here for more info @since 5.1.0
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 `boolean` Default `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`. Click here for more info
verticalLayout #	Type `VerticalLayout` Default `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` ) #	Static Returns `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. Click here for more info
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. Click here for more info
width() #	Returns `number` Returns the chart's width in pixels: the container's, or the one from `calculateSize` if set.

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

)

Static

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

Click here for more info

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.

Click here for more info

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 { timestamp: `number`, type: `"frameended"`, target: `this` } A frame finished rendering. `timestamp` is the frame's time in milliseconds.
#framestarted	Param { timestamp: `number`, type: `"framestarted"`, target: `this` } A frame started rendering. `timestamp` is the frame's time in milliseconds.

#frameended

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

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

#framestarted

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

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