Interaction – amCharts 4 Documentation

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.

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

/**
 * --------------------------------------------------------
 * Include via: <script src="core.js"></script>
 * Access items like: am4.Interaction
 * --------------------------------------------------------
 */

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.
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 `object` Inherited 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.
downObjects #	Type `List` < `InteractionObject` > Default `new List<InteractionObject>()` List of objects that currently has a pressed pointer.
events #	Type `EventDispatcher` < `AMEvent` < `this`, `IInteractionEvents` > > Inherited from `BaseObjectEvents` An `EventDispatcher` instance
focusedObject #	Type `$type.Optional` < `InteractionObject` > An object that currently has focus. Usually set automatically via `InteractionObject` `isFocus` method.
id #	Type `$type.Optional` < `string` > Inherited from `BaseObject` Sets the user-defined id of the element.
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 #	Static Type `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.
uid #	Type `string` Inherited from `BaseObject` Returns object's internal unique ID.
There are 5 inherited items currently hidden from this list.

Methods

areTransformed( except?: `InteractionObject` \| `InteractionObject[]` ) #	Returns `boolean` Checks whether there are currently any objects being transformed (dragged or resized). If `except` is set, that object will be ignored. @since 4.9.3
clone( cloneId?: `string` ) #	Returns `this` Inherited 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.
constructor() #	Returns `Interaction` Constructor. Sets up universal document-wide move events to handle stuff outside particular chart container.
copyFrom( source: `this` ) #	Returns `void` Inherited from `BaseObjectEvents` Copies all parameters from another `Sprite`.
dispatch( eventType: `Key`, data?: `any` ) #	Returns `void` Inherited 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 `void` Inherited from `BaseObjectEvents` Works like `dispatch`, except event is triggered immediately, without waiting for the next frame cycle.
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.
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.
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.
isDisposed() #	Returns `boolean` Inherited from `BaseObject` Returns if this object has been already been disposed.
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`. `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.
There are 6 inherited items currently hidden from this list.

areTransformed(

except?: InteractionObject | InteractionObject[]

)

Returns boolean

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

If except is set, that object will be ignored.

@since 4.9.3

clone(

cloneId?: string

)

Returns this

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

constructor()

Returns Interaction

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

copyFrom(

source: this

)

Returns void

Inherited from BaseObjectEvents

Copies all parameters from another Sprite.

dispatch(

eventType: Key,
data?: any

)

Returns void

Inherited 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 void

Inherited from BaseObjectEvents

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

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.

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.

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.

isDisposed()

Returns boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

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.

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.

There are 6 inherited items currently hidden from this list.

Events

#down	Param { event: `MouseEvent` \| `TouchEvent`, pointer: `IPointer`, touch: `boolean`, type: `"down"`, target: `this` }
#focus	Param { event: `FocusEvent`, type: `"focus"`, target: `this` }
#track	Param { event: `MouseEvent` \| `TouchEvent`, pointer: `IPointer`, touch: `boolean`, type: `"track"`, target: `this` }
#up	Param { event: `MouseEvent` \| `TouchEvent`, pointer: `IPointer`, touch: `boolean`, type: `"up"`, target: `this` }

Adapters

Interaction does not have any adapters.