Skip to content
amCharts 4

Interaction

Type class

Interaction manages all aspects of user interaction - mouse move, click, hover, drag events, touch gestures.

InteractionObject elements that want to use certain events, must attach event listeners to Interaction instance.

Interaction itself will not modify InteractionObject elements, it will be up to those elements to handle interaction information received via event triggers.

More info: IInteractionEvents for a list of available events

Sources

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

/**
 * Import from: "core.ts"
 * Use like: am4core.Interaction
 */
import * as am4core from "@amcharts/amcharts4/core";

Inheritance

Interaction extends BaseObjectEvents.

Interaction is not extended by any other symbol.

Properties

body

Type InteractionObject

A reference to an Interaction object for document's body.

Users can use it to add global, non-chart related events, that will be applicable to the whole document.

downObjects

Type List <InteractionObject>Default new List<InteractionObject>()

List of objects that currently has a pressed pointer.

focusedObject

Type $type.Optional <InteractionObject>

An object that currently has focus. Usually set automatically via InteractionObject isFocus method.

inertiaOptions

Type Dictionary <"move" | "resize", IInertiaOptions>Default new Dictionary<InertiaTypes, IInertiaOptions>()

Inertia options that need to be applied to after element drag, if it's inert = true.

This is just a default, which can and probably will be overridden by actual elements.

overObjects

Type List <InteractionObject>Default new List<InteractionObject>()

List of objects that current have a pointer hovered over them.

passiveSupported

StaticType boolean

Indicates if passive mode options is supported by this browser.

pointers

Type Dictionary <string, IPointer>Default new Dictionary<string, IPointer>()

Holds all known pointers.

trackedObjects

Type List <InteractionObject>Default new List<InteractionObject>()

List of objects that need mouse position to be reported to them.

transformedObjects

Type List <InteractionObject>Default new List<InteractionObject>()

List of objects that are currently being dragged.

5 inherited items
clonedFrom

Type $type.Optional <this>Inherited from BaseObject

Reference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed.

config

Type objectInherited from BaseObject

Use this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc.

Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations.

events

Type EventDispatcher <AMEvent <this, IBaseObjectEvents>>Inherited from BaseObjectEvents

An EventDispatcher instance

id

Type $type.Optional <string>Inherited from BaseObject

Sets the user-defined id of the element.

uid

Type stringInherited from BaseObject

Returns object's internal unique ID.

Methods

areTransformed(except?: InteractionObject | InteractionObject[])

Returns booleanSince 4.9.3

Checks whether there are currently any objects being transformed (dragged or resized).

If except is set, that object will be ignored.

constructor()

Returns Interaction

Constructor. Sets up universal document-wide move events to handle stuff outside particular chart container.

dispose()

Returns void

Disposes this object and cleans up after itself.

dragStart(io: InteractionObject,
pointer?: IPointer)

Returns void

Manually triggers drag start on the element. Could be useful in cases where tracking or dragging one element can also influence dragging another element.

Passing in pointer reference is advisable. If not passed in it will try to determine which pointer to attach to. However, it's better to specify it explicitly.

dragStop(io: InteractionObject,
pointer?: IPointer,
cancelled?: boolean)

Returns void

Manually ends drag on the element.

getDragPointer(io?: InteractionObject)

Returns $type.Optional <IPointer>

This method uses a fuzzy logic to find the pointer to be used for dragging.

Beware that this is not a rock-solid solution. If there are a few objects being dragged at the same time, you may get unexepected results.

getInteraction(element: HTMLElement | SVGSVGElement)

Returns InteractionObject

Returns an InteractionObject representation of a DOM element.

You can use this on any HTML or SVG element, to add interactive features to it.

getShift(pointer: IPointer)

Returns IPoint

Returns total a shift in pointers coordinates between its original position and now.

getTrailPoint(pointer: IPointer,
timestamp: number)

Returns $type.Optional <IBreadcrumb>

Returns a point from Pointer's move history at a certain timetamp.

moved(pointer: IPointer,
tolerance: number,
minTime: number)

Returns boolean

Checks if pointer has moved since it was created.

restoreAllStyles(io: InteractionObject)

Returns void

Restore temporarily reset styles on an element.

restoreStyle(io: InteractionObject,
property: string)

Returns void

Restores specific style on an element.

setTemporaryStyle(io: InteractionObject,
property: string,
value: string)

Returns void

Sets a style property on an element. Stores original value to be restored later with restoreStyle.

More info: restoreStyle

swiped(io: InteractionObject,
pointer: IPointer)

Returns boolean

Returns true if a successfull swipe action was performed on an element.

swiping(io: InteractionObject,
pointer: IPointer)

Returns boolean

Check if swiping is currently being performed on an object.

6 inherited items
clone(cloneId?: string)

Returns thisInherited from BaseObject

Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them.

copyFrom(source: this)

Returns voidInherited from BaseObjectEvents

Copies all parameters from another Sprite.

dispatch(eventType: Key,
data?: any)

Returns voidInherited from BaseObjectEvents

Dispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element).

It also checks if there are any handlers registered for this sepecific event.

dispatchImmediately(eventType: Key,
data?: any)

Returns voidInherited from BaseObjectEvents

Works like dispatch, except event is triggered immediately, without waiting for the next frame cycle.

getCurrentThemes()

Returns ITheme[]Inherited from BaseObject

Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide.

isDisposed()

Returns booleanInherited from BaseObject

Returns if this object has been already been disposed.

Events

down

Param { type: "down", target: Interaction, event: MouseEvent | TouchEvent, pointer: IPointer, touch: boolean }

focus

Param { type: "focus", target: Interaction, event: FocusEvent }

track

Param { type: "track", target: Interaction, event: MouseEvent | TouchEvent, pointer: IPointer, touch: boolean }

up

Param { type: "up", target: Interaction, event: MouseEvent | TouchEvent, pointer: IPointer, touch: boolean }