Skip to content
amCharts 4

InteractionObject

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

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.

contextMenuDisabled

Type booleanDefault 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.

More info: 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.

hoverable

Type boolean

Indicates if element should generate hover events.

hoverOptions

Type IHoverOptions

Hover options.

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 IMouseOptionsSince 4.5.14

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
    }
  }
}
overPointers

Type List <IPointer>

A list of pointers currently over the element.

More info: Pointer

resizable

Type boolean

Indicates if element can be resized.

sprite

Type Sprite

A related Sprite if any.

swipeable

Type boolean

Indicates whether element should react to swipe gesture.

swipeOptions

Type ISwipeOptions

Swipe options.

tabindex

Type number

Element's tab index.

trackable

Type boolean

Indicates if pointer movement over element should be tracked.

wheelable

Type boolean

Indicates whether track moouse wheel rotation over element.

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

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

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.

dispose()

Returns void

Disposes object.

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

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

blur

Param { type: "blur", target: InteractionObject, event: FocusEvent }

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 { type: "doublehit", target: InteractionObject } & PointerTypeEvent & PointEvent & MouseTouchEvent

Invoked when object is clicked or touched twice in rapid succession.

Check IHitOptions for settings about double hit.

down

Param { type: "down", target: InteractionObject } & PointerTypeEvent & PointerEvent & MouseTouchEvent

Invoked when the mouse button is pressed or touch starts.

drag

Param { type: "drag", target: InteractionObject, event: MouseEvent | TouchEvent | KeyboardEvent, startPoint: IPoint } & PointerTypeEvent & ShiftEvent & PointEvent

Invoked when draggable object is being dragged. (using mouse, touch or keyboard)

dragstart

Param { type: "dragstart", target: InteractionObject, event: MouseEvent | TouchEvent | KeyboardEvent } & PointerTypeEvent

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 { type: "dragstop", target: InteractionObject, event: MouseTouchEvent | KeyboardEvent } & PointerTypeEvent

Invoked when draggable object is released. This event will not fire if position of the object did not change.

focus

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

Invoked when focusable object gains focus, e.g. by using TAB button.

hit

Param { type: "hit", target: InteractionObject } & PointerTypeEvent & PointEvent & MouseTouchEvent

Invoked when object is clicked or touched.

input

Param { type: "input", target: InteractionObject, event: KeyboardEvent }

Invoked whenever information changes in the textual input elements, like <input>, <textarea>, etc.

keydown

Param { type: "keydown", target: InteractionObject, event: KeyboardEvent }

Invoked when the key is pressed on the keyboard.

keypress

Param { type: "keypress", target: InteractionObject, event: KeyboardEvent }

Invoked when the key generates a "press", e.g. pressing and holding a letter key will generate repeated "keypress" events.

keyup

Param { type: "keyup", target: InteractionObject, event: KeyboardEvent }

Invoked when the key is released on the keyboard.

out

Param { type: "out", target: InteractionObject } & PointerTypeEvent & MouseTouchEvent & PointerEvent

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 { type: "over", target: InteractionObject } & PointerTypeEvent & MouseTouchEvent & PointerEvent

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 { type: "resize", target: InteractionObject, point1: IPoint, point2: IPoint, startPoint1: IPoint, startPoint2: IPoint } & PointerTypeEvent & ScaleEvent & MouseTouchEvent

Invoked when resizable object is being resized either by mouse or touch pinch gesture.

rightclick

Param { type: "rightclick", target: InteractionObject } & MouseTouchEvent

Invoked when right mouse button is clicked on the object.

swipe

Param { type: "swipe", target: InteractionObject } & PointerTypeEvent & MouseTouchEvent

Invoked when user performs "swiping" gesture (quick horizontal movement) on the object, either using mouse or touch.

swipeleft

Param { type: "swipeleft", target: InteractionObject } & PointerTypeEvent & MouseTouchEvent

Invoked when user performs "swiping" gesture towards left.

swiperight

Param { type: "swiperight", target: InteractionObject } & PointerTypeEvent & MouseTouchEvent

Invoked when user performs "swiping" gesture towards right.

track

Param { type: "track", target: InteractionObject } & PointerTypeEvent & PointEvent & PointerEvent & MouseTouchEvent

Invoked when pointer (mouse cursor or touch point) moves over trackable object.

up

Param { type: "up", target: InteractionObject } & PointerTypeEvent & PointerEvent & MouseTouchEvent

Invoked when the mouse button is released or touch ends.

wheel

Param { type: "wheel", target: InteractionObject, event: WheelEvent } & PointEvent & ShiftEvent

Invoked when user turns mouse wheel while over the object.

wheeldown

Param { type: "wheeldown", target: InteractionObject, event: WheelEvent } & PointEvent & ShiftEvent

Invoked when user turns mouse wheel downwards while over the object.

wheelleft

Param { type: "wheelleft", target: InteractionObject, event: WheelEvent } & PointEvent & ShiftEvent

Invoked when user turns mouse wheel leftwards while over the object.

wheelright

Param { type: "wheelright", target: InteractionObject, event: WheelEvent } & PointEvent & ShiftEvent

Invoked when user turns mouse wheel rightwards while over the object.

wheelup

Param { type: "wheelup", target: InteractionObject, event: WheelEvent } & PointEvent & ShiftEvent

Invoked when user turns mouse wheel upwards while over the object.