Root – amCharts 5 Documentation

Type class

Root element of the chart.

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` Indicates whether chart should resized automatically when parent container width and/or height changes. If disabled (`autoResize = false`) you can make the chart resize manually by calling root element's `resize()` method.
container #	Type `Container` Main content container.
dateFormatter #	Type `DateFormatter` Default `DateFormatter.new(this, { })` Date/time formatter. Click here for more info
dom #	Type `HTMLElement` A reference to original chart container (div element).
durationFormatter #	Type `DurationFormatter` Default `DurationFormatter.new(this, { })` Duration formatter. Click here for more info
events #	Type `EventDispatcher` Default `new EventDispatcher()` Root's event dispatcher. Click here for more info
fps #	Type `number` \| `undefined` The maximum FPS that the Root will run at. If `undefined` it will run at the highest FPS. Click here for more info
gridLayout #	Type `VerticalLayout` Default `VerticalLayout.new()` An instance of grid layout object that can be used to set `layout` setting of a `Container`.
horizontalLayout #	Type `VerticalLayout` Default `HorizontalLayout.new()` An instance of horizontal layout object that can be used to set `layout` setting of a `Container`.
interfaceColors #	Type `InterfaceColors` Special color set to be used for various controls. Click here for more info
locale #	Type `ILocale` Default `en` Locale used by the chart. Click here
nonce #	Type `undefined` \| `string` Used for dynamically-created CSS and JavaScript with strict source policies.
numberFormatter #	Type `NumberFormatter` Default `NumberFormatter.new(this, { })` Number formatter. Click here for more info
tabindex #	Type `number` Default `0` Global tab index for using for the whole chart Click here for more info
tapToActivate #	Type `boolean` Default `false` Set this to `true` if you need chart to require first a tap onto it before touch gesture related functionality like zoom/pan is turned on. Click here for more info @since 5.2.9
tapToActivateTimeout #	Type `number` Default `3000` If `tapToActivate` is set to `true`, this setting will determine number of milliseconds the chart will stay "active", before releasing the controls back to the page. Click here for more info @since 5.2.9
timezone #	Type `Timezone` If set, will format date/time in specific time zone. The value should be named time zone, e.g.: `"America/Vancouver"`, `"Australia/Sydney"`, `"UTC"`. NOTE: Using time zone feature may noticeable affect performance of the chart, especially with large data sets, since every single date will need to be recalculated. Click here for more info @since 5.1.0
tooltipContainer #	Type `Container` A `Container` used to display tooltips in.
updateTick #	Type `boolean` Returns whether the root is updating or not. Enables or disables the root updating.
utc #	Type `boolean` Default `false` Use UTC when formatting date/time. Click here for more info
verticalLayout #	Type `VerticalLayout` Default `VerticalLayout.new()` An instance of vertical layout object that can be used to set `layout` setting of a `Container`.

Methods

dispose() #	Returns `void` Disposes root and all the content in it.
documentPointToRoot( point: `IPoint` ) #	Returns `IPoint` Converts document coordinates to coordinates withing root element.
eachFrame( f: ( currentTime: `number`) => `void` ) #	Returns `IDisposer`
focused( target: `Sprite` ) #	Returns `boolean` Returns `true` if `target` is currently focused.
height() #	Returns `number` Returns height of the target container, in pixels.
isDisposed() #	Returns `boolean` Returns `true` if root element is disposed.
markDirtyGlobal( container?: `Container` ) #	Returns `void`
moveDOM( id: `string` \| `HTMLElement` ) #	Returns `void`
new( id: `string` \| `HTMLElement`, settings?: `IRootSettings` ) #	Static Returns `Root`
readerAlert( text: `string` ) #	Returns `void` Triggers screen reader read out a message. Click here for more info
resize() #	Returns `void` If automatic resizing of char is disabled (`root.autoResize = false`), it can be resized manually by calling this method.
rootPointToDocument( point: `IPoint` ) #	Returns `IPoint` Converts root coordinates to document
setThemes( themes: `Array` ) #	Returns `void` Sets themes to be used for the chart. Click here for more info
width() #	Returns `number` Returns width of the target container, in pixels.

dispose()

Returns void

Disposes root and all the content in it.

documentPointToRoot(

point: IPoint

)

Returns IPoint

Converts document coordinates to coordinates withing root element.

eachFrame(

f: ( currentTime: number) => void

)

Returns IDisposer

focused(

target: Sprite

)

Returns boolean

Returns true if target is currently focused.

height()

Returns number

Returns height of the target container, in pixels.

isDisposed()

Returns boolean

Returns true if root element is disposed.

markDirtyGlobal(

container?: Container

)

Returns void

moveDOM(

id: string | HTMLElement

)

Returns void

new(

id: string | HTMLElement,
settings?: IRootSettings

)

Static

Returns Root

readerAlert(

text: string

)

Returns void

Triggers screen reader read out a message.

Click here for more info

resize()

Returns void

If automatic resizing of char is disabled (root.autoResize = false), it can be resized manually by calling this method.

rootPointToDocument(

point: IPoint

)

Returns IPoint

Converts root coordinates to document

setThemes(

themes: Array

)

Returns void

Sets themes to be used for the chart.

Click here for more info

width()

Returns number

Returns width of the target container, in pixels.

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` }
#framestarted	Param { timestamp: `number`, type: `"framestarted"`, target: `this` }