InteractionObject – amCharts 4 Documentation

Type class

Interaction object represents an object that is subject for any kind of interaction with it with any input devices: mouse, touch or keyboard.

Any DOM element can be wrapped into an Internaction object which in turn enables attaching various interaction events to it, such as: hit, drag, swipe, etc.

To create an InteractionObject out of a Sprite, use:

interaction.getInteractionFromSprite(sprite: Sprite) To create an InteractionObject out of a a regular element:

interaction.getInteraction(element: HTMLElement)

Sources

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

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

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

Inheritance

InteractionObject extends BaseObjectEvents.

InteractionObject is not extended by any other symbol.

Properties

clickable #	Type `boolean` Is element clickable? Clickable elements will generate "hit" events when clicked or tapped.
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.
contextMenuDisabled #	Type `boolean` Default `false` Should element prevent context menu to be displayed, e.g. when right-clicked?
cursorOptions #	Type `ICursorOptions` Cursor options.
downPointers #	Type `List` < `IPointer` > A list of pointers currently pressing down on this element. `Pointer`
draggable #	Type `boolean` Indicates if element can be dragged. (moved)
element #	Type `HTMLElement` \| `SVGSVGElement` A DOM element associated with this element.
events #	Type `InteractionObjectEventDispatcher` < `AMEvent` < `this`, `IInteractionObjectEvents` > > An `EventDispatcher` instance which holds events for this object
focusable #	Type `$type.Optional` < `boolean` > Indicates if element can gain focus.
hitOptions #	Type `IHitOptions` Hit options.
hoverOptions #	Type `IHoverOptions` Hover options.
hoverable #	Type `boolean` Indicates if element should generate hover events.
id #	Type `$type.Optional` < `string` > Inherited from `BaseObject` Sets the user-defined id of the element.
inert #	Type `boolean` Indicates if element is inert, i.e. if it should carry movement momentum after it is dragged and released.
inertiaOptions #	Type `Dictionary` < `InertiaTypes`, `IInertiaOptions` > Inertia options.
isDown #	Type `boolean` Indicates if this element has currently any pointers pressing on it.
isFocused #	Type `boolean` Indicates if this element is currently focused.
isHover #	Type `boolean` Indicates if this element is currently hovered.
isHoverByTouch #	Type `boolean` Indicates if this element is currently hovered.
keyboardOptions #	Type `IKeyboardOptions` Keyboard options.
mouseOptions #	Type `IMouseOptions` Mouse options. Enables controlling options related to the mouse, for example sensitivity of its mouse wheel. E.g. the below will reduce chart's wheel-zoom speed to half its default speed: chart.plotContainer.mouseOptions.sensitivity = 0.5; chart.plotContainer.mouseOptions.sensitivity = 0.5; { // ... "plotContainer": { "mouseOptions": { "sensitivity": 0.5 } } } @since 4.5.14
overPointers #	Type `List` < `IPointer` > A list of pointers currently over the element. `Pointer`
resizable #	Type `boolean` Indicates if element can be resized.
sprite #	Type `Sprite` A related `Sprite` if any.
swipeOptions #	Type `ISwipeOptions` Swipe options.
swipeable #	Type `boolean` Indicates whether element should react to swipe gesture.
tabindex #	Type `number` Element's tab index.
trackable #	Type `boolean` Indicates if pointer movement over element should be tracked.
uid #	Type `string` Inherited from `BaseObject` Returns object's internal unique ID.
wheelable #	Type `boolean` Indicates whether track moouse wheel rotation over element.
There are 4 inherited items currently hidden from this list.

Methods

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( element: `HTMLElement` \| `SVGSVGElement` ) #	Returns `InteractionObject` Constructor
copyFrom( source: `this` ) #	Returns `void` Copies all properties and related assets from another object of the same type.
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 object.
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 `boolean` Inherited from `BaseObject` Returns if this object has been already been disposed.
There are 5 inherited items currently hidden from this list.

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(

element: HTMLElement | SVGSVGElement

)

Returns InteractionObject

Constructor

copyFrom(

source: this

)

Returns void

Copies all properties and related assets from another object of the same type.

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

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 boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

There are 5 inherited items currently hidden from this list.

Events

#blur	Param { event: `FocusEvent`, type: `"blur"`, target: `this` } Invoked when `focusable` object loses focus, e.g. by clicking outside it or pressing TAB button to focus on the next focusable object.
#doublehit	Param `PointerTypeEvent` & `PointEvent` & `MouseTouchEvent` & { type: `"doublehit"`, target: `this` } Invoked when object is clicked or touched twice in rapid succession. Check `IHitOptions` for settings about double hit.
#down	Param `PointerTypeEvent` & `PointerEvent` & `MouseTouchEvent` & { type: `"down"`, target: `this` } Invoked when the mouse button is pressed or touch starts.
#drag	Param `PointerTypeEvent` & `ShiftEvent` & `PointEvent` & { event: `MouseEvent` \| `TouchEvent` \| `KeyboardEvent`, startPoint: `IPoint`, type: `"drag"`, target: `this` } Invoked when `draggable` object is being dragged. (using mouse, touch or keyboard)
#dragstart	Param `PointerTypeEvent` & { event: `MouseEvent` \| `TouchEvent` \| `KeyboardEvent`, type: `"dragstart"`, target: `this` } Invoked when `draggable` object dragging starts. This event is not invoked immediatelly after `down`, but only if there's a movement of the pointer.
#dragstop	Param `PointerTypeEvent` & { event: `MouseTouchEvent` \| `KeyboardEvent`, type: `"dragstop"`, target: `this` } Invoked when `draggable` object is released. This event will not fire if position of the object did not change.
#focus	Param { event: `FocusEvent`, type: `"focus"`, target: `this` } Invoked when `focusable` object gains focus, e.g. by using TAB button.
#hit	Param `PointerTypeEvent` & `PointEvent` & `MouseTouchEvent` & { type: `"hit"`, target: `this` } Invoked when object is clicked or touched.
#input	Param { event: `KeyboardEvent`, type: `"input"`, target: `this` } Invoked whenever information changes in the textual input elements, like `<input>`, `<textarea>`, etc.
#keydown	Param { event: `KeyboardEvent`, type: `"keydown"`, target: `this` } Invoked when the key is pressed on the keyboard.
#keypress	Param { event: `KeyboardEvent`, type: `"keypress"`, target: `this` } Invoked when the key generates a "press", e.g. pressing and holding a letter key will generate repeated "keypress" events.
#keyup	Param { event: `KeyboardEvent`, type: `"keyup"`, target: `this` } Invoked when the key is released on the keyboard.
#out	Param `PointerTypeEvent` & `MouseTouchEvent` & `PointerEvent` & { type: `"out"`, target: `this` } Invoked when mouse cursor moves out of `hoverable` object or it is no longer touched. NOTE: this event might not always contains `pointer` parameter as event might be triggered by API?
#over	Param `PointerTypeEvent` & `MouseTouchEvent` & `PointerEvent` & { type: `"over"`, target: `this` } Invoked when mouse cursor moves over `hoverable` object or it is touched. NOTE: this event might not always contains `pointer` parameter as event might be triggered by API?
#resize	Param `PointerTypeEvent` & `ScaleEvent` & `MouseTouchEvent` & { point1: `IPoint`, point2: `IPoint`, startPoint1: `IPoint`, startPoint2: `IPoint`, type: `"resize"`, target: `this` } Invoked when `resizable` object is being resized either by mouse or touch pinch gesture.
#rightclick	Param { type: `"rightclick"`, target: `this` } Invoked when right mouse button is clicked on the object.
#swipe	Param `PointerTypeEvent` & `MouseTouchEvent` & { type: `"swipe"`, target: `this` } Invoked when user performs "swiping" gesture (quick horizontal movement) on the object, either using mouse or touch.
#swipeleft	Param `PointerTypeEvent` & `MouseTouchEvent` & { type: `"swipeleft"`, target: `this` } Invoked when user performs "swiping" gesture towards left.
#swiperight	Param `PointerTypeEvent` & `MouseTouchEvent` & { type: `"swiperight"`, target: `this` } Invoked when user performs "swiping" gesture towards right.
#track	Param `PointerTypeEvent` & `PointEvent` & `PointerEvent` & `MouseTouchEvent` & { type: `"track"`, target: `this` } Invoked when pointer (mouse cursor or touch point) moves over `trackable` object.
#up	Param `PointerTypeEvent` & `PointerEvent` & `MouseTouchEvent` & { type: `"up"`, target: `this` } Invoked when the mouse button is released or touch ends.
#wheel	Param `PointEvent` & `ShiftEvent` & { event: `WheelEvent`, type: `"wheel"`, target: `this` } Invoked when user turns mouse wheel while over the object.
#wheeldown	Param `PointEvent` & `ShiftEvent` & { event: `WheelEvent`, type: `"wheeldown"`, target: `this` } Invoked when user turns mouse wheel downwards while over the object.
#wheelleft	Param `PointEvent` & `ShiftEvent` & { event: `WheelEvent`, type: `"wheelleft"`, target: `this` } Invoked when user turns mouse wheel leftwards while over the object.
#wheelright	Param `PointEvent` & `ShiftEvent` & { event: `WheelEvent`, type: `"wheelright"`, target: `this` } Invoked when user turns mouse wheel rightwards while over the object.
#wheelup	Param `PointEvent` & `ShiftEvent` & { event: `WheelEvent`, type: `"wheelup"`, target: `this` } Invoked when user turns mouse wheel upwards while over the object.

Adapters

InteractionObject does not have any adapters.