Root

Type class

Root element of the chart.

Click here for more info

Sources

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

// Root is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Import from: "index.ts"
 * Use like: am5.Root
 * --------------------------------------------------------
 */
import * as am5 from "@amcharts/amcharts5";

// Root is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Include via: <script src="index.js"></script>
 * Access items like: am5.Root
 * --------------------------------------------------------
 */

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

Click here for more info
@since 5.1.0

tooltipContainer
#

Type Container

A Container used to display tooltips in.

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.

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 }