Documentation

Annotator

Type class

A plugin that lets the user draw annotations over the chart, using the MarkerJS library.

Click here for more info

Sources

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

// Import Annotator
import * as am5plugins_exporting from "@amcharts/amcharts5/plugins/exporting";

am5plugins_exporting.Annotator.new(root, {
  // ... config if applicable
});

<!-- Load Annotator -->
<script src="plugins/exporting.js">

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

Inheritance

Annotator extends Entity.

Annotator is not extended by any other symbol.

Settings

Set these settings on a Annotator object using its set() and setAll() methods.

Read about settings concept.

animations
#

Type Array

Inherited from IEntitySettings

Animations the element plays on its own, described as data - so they can be set from a JSON config and saved with it.

Each one animates a setting of the element (or, with target: "dataItem", a value of its data item - a map point's positionOnLine, say). They start when the setting is applied, restart when it changes, and stop when the element is disposed. A saved config keeps what was configured, never a value caught half way through an animation.

sprite.set("animations", [
  { key: "rotation", to: 360, duration: 4000, loops: 0 },
  { key: "scale", from: 1, to: 1.3, duration: 800, loops: 0, yoyo: true, easing: "sine" }
]);

@since 5.20.8

id
#

Type undefined | string

Inherited from IEntitySettings

A unique ID for looking the element up in root.entitiesById. Setting an ID that another element already has throws an error.
ignoreThemes
#

Type undefined | false | true

Default false

Inherited from IEntitySettings

Ignores themes: no theme rule applies to the element, not even one of the default theme.

@since 5.15.6

layer
#

Type undefined | number

Default 1000

Layer the annotations are drawn on, above the chart.
markerSettings
#

Type undefined | object

Settings for MarkerJS's MarkerArea, as an object of setting names and values, e.g.:

let annotator = am5plugins_exporting.Annotator.new(root, {
 markerSettings: {
   defaultColorSet: ["red", "green", "blue"],
   wrapText: true
 }
});

var annotator = am5plugins_exporting.Annotator.new(root, {
 markerSettings: {
   defaultColorSet: ["red", "green", "blue"],
   wrapText: true
 }
});

Click here for a full list of settings
@since 5.7.4

markerState
#

Type any

The annotations, as state saved by MarkerJS. Setting it draws them, e.g.

to restore annotations saved earlier.
markerStyleSettings
#

Type undefined | object

Style settings for the MarkerJS user interface, e.g.:

let annotator = am5plugins_exporting.Annotator.new(root, {
 markerStyleSettings: {
   toolboxColor: "#F472B6",
   toolboxAccentColor: "#BE185D"
 }
});

var annotator = am5plugins_exporting.Annotator.new(root, {
 markerStyleSettings: {
   toolboxColor: "#F472B6",
   toolboxAccentColor: "#BE185D"
 }
});

Click here for a full list of settings
@since 5.7.5

stateAnimationDuration
#

Type undefined | number

Default 0

Inherited from IEntitySettings

How long, in milliseconds, a switch from one state to another animates.

0 switches at once.
stateAnimationEasing
#

Type $ease.Easing

Default out(cubic)

Inherited from IEntitySettings

Easing of the animated switch from one state to another.
themeTags
#

Type Array

Inherited from IEntitySettings

Tags that theme rules can target. They also count for the element's children, so a rule can match a child by a tag of its parent.

Click here for more info

themeTagsSelf
#

Type Array

Inherited from IEntitySettings

Tags that theme rules can target, like themeTags, but only for this element, not its children.

Click here for more info

themes
#

Type Array

Inherited from IEntitySettings

Themes applied to the element and everything inside it.
userData
#

Type any

Inherited from IEntitySettings

Any data of your own to keep with the element.
There are 9 inherited items currently hidden from this list.

Private settings

Properties

adapters
#

Type Adapters

Default new Adapters(this)

Inherited from Entity
className
#

Static

Type string

Default "Annotator"
classNames
#

Static

Type Array

Default "Annotator", "Entity"
enableDispose
#

Type boolean

Default true

Inherited from Settings

Set to false to make dispose() do nothing.
events
#

Type EventDispatcher

Default this._createEvents()

Inherited from Entity
root
#

Type Root

Inherited from Entity

The Root the object belongs to.

@readonly
@since 5.0.6

states
#

Type States

Default new States(this)

Inherited from Entity
template
#

Type Template | undefined

Inherited from Entity

A Template applied to the object. Its settings apply where the object has none set of its own.
uid
#

Type number

Default ++counter

Inherited from Settings

A unique number, given to each object as it is created.
There are 7 inherited items currently hidden from this list.

Methods

animate(

options: AnimationOptions

)

#

Returns Animation

Inherited from Settings

Animates a setting from its current value (or from) to to. The setting jumps to from at once. With duration 0, or no value to start from, it is set to to at once and the returned animation is already stopped.

Click here for more info

cancel()

#

Returns Promise

Exits annotation mode, discarding the changes made since it opened.

clear()

#

Returns void

Removes all annotations.

close()

#

Returns Promise

Exits annotation mode. The annotations stay visible on the chart.

dispose()

#

Returns void

Inherited from Settings

Disposes the object, freeing everything it holds. A disposed object can't be used again.

get(

key: Key,
fallback: F

)

#

Returns NonNullable | F

Inherited from Entity

Returns the value of setting key, run through any adapters, or fallback if it is not set.

Click here for more info

getMarkerArea()

#

Returns Promise

Returns MarkerJS's MarkerArea, loading MarkerJS first if needed.

Click here for more info

has(

key: Key

)

#

Returns boolean

Inherited from Settings

Returns true if setting key is set.

Click here for more info

isDisposed()

#

Returns boolean

Inherited from Settings

Returns true if the object has been disposed.

isType(

type: string

)

#

Returns this

Inherited from Entity

Returns true if the object is of class type or extends it.

new(

root: Root,
settings: ITSettings,
template?: Template

)

#

Static

Returns T

Inherited from Entity

Creates an instance of the class. Use it instead of new Class().

Click here for more info

off(

key: Key,
callback?: undefined | ( value: [""], target: this, key: Key) => void

)

#

Returns void

Inherited from Settings

Removes a callback added with on(). Without callback, removes all of them for key.

Click here for more info
@since 5.9.2

offDebounced(

key: Key,
callback?: undefined | ( value: [""], target: this, key: Key) => void

)

#

Returns void

Inherited from Settings

Removes a callback added with onDebounced(). Without callback, removes all of them for key.

Click here for more info

offDebouncedPrivate(

key: Key,
callback?: undefined | ( value: [""], target: this, key: Key) => void

)

#

Returns void

Inherited from Settings

Removes a callback added with onPrivateDebounced(). Without callback, removes all of them for key.

Click here for more info

offPrivate(

key: Key,
callback?: undefined | ( value: [""], target: this, key: Key) => void

)

#

Returns void

Inherited from Settings

Removes a callback added with onPrivate(). Without callback, removes all of them for key.

Click here for more info
@since 5.9.2

on(

key: Key,
callback: ( value: [""], target: this, key: Key) => void

)

#

Returns IDisposer

Inherited from Settings

Calls callback each time the value of setting key changes or is removed. Setting the same value again does not call it.

Click here for more info

onDebounced(

key: Key,
callback: ( value: [""], target: this, key: Key) => void,
debounceDelay: number

)

#

Returns IDisposer

Inherited from Settings

Like on(), but waits until setting key has not changed for debounceDelay milliseconds, then calls callback once with the latest value.

Click here for more info

onPrivate(

key: Key,
callback: ( value: [""], target: this, key: Key) => void

)

#

Returns IDisposer

Inherited from Settings

Calls callback each time the value of private setting key changes.

Click here for more info

onPrivateDebounced(

key: Key,
callback: ( value: [""], target: this, key: Key) => void,
debounceDelay: number

)

#

Returns IDisposer

Inherited from Settings

Like onPrivate(), but waits until private setting key has not changed for debounceDelay milliseconds, then calls callback once with the latest value.

Click here for more info

once(

key: Key,
callback: ( value: [""], target: this, key: Key) => void

)

#

Returns IDisposer

Inherited from Settings

Like on(), but the callback is removed after it is called once.

Click here for more info
@since 5.20.4

onceDebounced(

key: Key,
callback: ( value: [""], target: this, key: Key) => void,
debounceDelay: number

)

#

Returns IDisposer

Inherited from Settings

Like onDebounced(), but the callback is removed after it is called once.

Click here for more info
@since 5.20.4

open()

#

Returns Promise

Opens annotation mode: shows the MarkerJS toolbars and disables interaction with the chart.

remove(

key: Key

)

#

Returns void

Inherited from Entity

Removes the value set for setting key. The setting goes back to the value from a theme or template, if one has it.

Click here for more info

removeAll()

#

Returns void

Inherited from Settings

Removes all settings, as remove() does for each one.

Click here for more info

set(

key: Key,
value: Value

)

#

Returns Value

Inherited from Entity

Sets setting key to value and returns value. A value set this way overrides themes and templates, and stops any animation of the setting.

Click here for more info

setAll(

settings: Partial

)

#

Returns void

Inherited from Settings

Sets several settings at once, from an object of key-value pairs.

Click here for more info

setTimeout(

fn: () => void,
delay: number

)

#

Returns IDisposer

Inherited from Entity

Calls fn after delay milliseconds, unless the object is disposed first. Disposing the returned disposer cancels it.

toggle()

#

Returns Promise

Opens annotation mode, or closes it if it is open.
There are 22 inherited items currently hidden from this list.

Events

Annotator does not have any events.