Root - amCharts 5

Root element of the chart. Every chart must have exactly one Root instance.

Constructor

Root.new()

Creates a new Root instance.

string | HTMLElement

required

ID of the target HTML element or the element itself

settings

IRootSettings

Root configuration settings

root

Root

New Root instance

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

const root = am5.Root.new("chartdiv");

Properties

dom

HTMLElement

Reference to original chart container (div element)

container

Container

Main content container for the chart

tooltipContainer

Container used to display tooltips

locale

ILocale

default:"en"

Locale used by the chart

See Locales for more info.

utc

boolean

default:false

Use UTC when formatting date/time

See UTC and time zones for more info.

timezone

Timezone

If set, will format date/time in specific time zone (e.g. “America/Vancouver”, “Australia/Sydney”, “UTC”)

NOTE: Using time zone feature may noticeably affect performance with large data sets.

fps

number | undefined

Maximum FPS that the Root will run at. If undefined it will run at the highest FPS.

See Performance for more info.

numberFormatter

NumberFormatter

Number formatter instance

See Formatting numbers for more info.

dateFormatter

DateFormatter

Date/time formatter instance

See Formatting dates for more info.

durationFormatter

DurationFormatter

Duration formatter instance

tabindex

number

default:0

Global tab index for using for the whole chart

See Accessibility for more info.

interfaceColors

InterfaceColors

Special color set to be used for various controls

See Interface colors for more info.

verticalLayout

VerticalLayout

An instance of vertical layout object that can be used to set layout setting of a Container

horizontalLayout

HorizontalLayout

An instance of horizontal layout object that can be used to set layout setting of a Container

gridLayout

GridLayout

An instance of grid layout object that can be used to set layout setting of a Container

autoResize

boolean

default:true

Indicates whether chart should resize automatically when parent container width/height changes

If disabled (autoResize = false), you can resize the chart manually by calling resize() method.

nonce

string

Used for dynamically-created CSS and JavaScript with strict source policies

entitiesById

{ [index: string]: any }

Entities that have their id setting set

events

EventDispatcher<Events<Root, IRootEvents>>

Root’s event dispatcher

See Events for more info.

Methods

setThemes()

Sets themes to be used for the chart.

themes

Array<Theme>

required

A list of themes

import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

root.setThemes([
  am5themes_Animated.new(root)
]);

See Themes for more info.

resize()

Manually resizes the chart. Use this when automatic resizing is disabled (root.autoResize = false).

root.resize();

dispose()

Disposes root and all the content in it.

root.dispose();

isDisposed()

Returns true if root element is disposed.

disposed

boolean

Whether the root is disposed

if (root.isDisposed()) {
  // Root has been disposed
}

width()

Returns width of the target container in pixels.

width

number

Width in pixels

const width = root.width();

height()

Returns height of the target container in pixels.

height

number

Height in pixels

const height = root.height();

moveDOM()

Moves the Root to a different HTML element.

string | HTMLElement

required

ID of the new target HTML element or the element itself

root.moveDOM("newChartDiv");

readerAlert()

Triggers screen reader to read out a message.

text

string

required

Alert text

root.readerAlert("Chart data has been updated");

See Accessibility for more info.

documentPointToRoot()

Converts document coordinates to coordinates within root element.

point

IPoint

required

Document point with x and y coordinates

point

IPoint

Root point with x and y coordinates

const rootPoint = root.documentPointToRoot({ x: 100, y: 200 });

rootPointToDocument()

Converts root coordinates to document coordinates.

point

IPoint

required

Root point with x and y coordinates

point

IPoint

Document point with x and y coordinates

const docPoint = root.rootPointToDocument({ x: 100, y: 200 });

eachFrame()

Registers a callback function to be called on each frame.

callback

(currentTime: number) => void

required

Function to call on each frame

disposer

IDisposer

Disposer to remove the callback

const disposer = root.eachFrame((currentTime) => {
  console.log("Frame rendered at:", currentTime);
});

// Remove callback
disposer.dispose();

focused()

Returns true if target sprite is currently focused.

target

Sprite

required

Target sprite

focused

boolean

Whether the target is focused

if (root.focused(sprite)) {
  // Sprite is focused
}

Settings

IRootSettings

useSafeResolution

boolean

default:true

Indicates whether chart should use “safe” resolution on some memory-limiting platforms such as Safari

Allows defining margins around chart area for tooltips to go outside the chart itself

accessible

boolean

default:true

Set to false to disable all accessibility features. NOTE: once disabled, accessibility cannot be re-enabled on a live Root object.

focusable

boolean

default:false

If set to true, the parent inner <div> element will become a focusable element

See Accessibility of Root element for more info.

focusPadding

number

default:2

Distance between focused element and its highlight square in pixels

ariaLabel

string

If set to some string, it will be used as inner <div> ARIA-LABEL. Should be used in conjunction with focusable.

role

string

Allows setting a “role” for the inner <div>

calculateSize

(dimensions: DOMRect) => ISize

Allows for specifying a custom width/height for the chart. This function will be called automatically when the chart is resized.

Events

IRootEvents

framestarted

{ timestamp: number }

Invoked when a frame starts rendering

frameended

{ timestamp: number }

Invoked when a frame ends rendering

root.events.on("frameended", (ev) => {
  console.log("Frame ended at:", ev.timestamp);
});

Core

Shapes

Controls

XY Charts

Map Charts

Stock Charts

Hierarchy Charts

Utilities

​Constructor

​Root.new()

​Properties

​dom

​container

​tooltipContainer

​locale

​utc

​timezone

​fps

​numberFormatter

​dateFormatter

​durationFormatter

​tabindex

​interfaceColors

​verticalLayout

​horizontalLayout

​gridLayout

​autoResize

​nonce

​entitiesById

​events

​Methods

​setThemes()

​resize()

​dispose()

​isDisposed()

​width()

​height()

​moveDOM()

​readerAlert()

​documentPointToRoot()

​rootPointToDocument()

​eachFrame()

​focused()

​Settings

​IRootSettings

​Events

​IRootEvents

Build docs developers (and LLMs) love

Constructor

Root.new()

Properties

dom

container

tooltipContainer

locale

utc

timezone

fps

numberFormatter

dateFormatter

durationFormatter

tabindex

interfaceColors

verticalLayout

horizontalLayout

gridLayout

autoResize

nonce

entitiesById

events

Methods

setThemes()

resize()

dispose()

isDisposed()

width()

height()

moveDOM()

readerAlert()

documentPointToRoot()

rootPointToDocument()

eachFrame()

focused()

Settings

IRootSettings

Events

IRootEvents