Sprite – amCharts 5 Documentation

Type class

Base class of all visual elements.

Sources

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

// Import Sprite
import * as am5 from "@amcharts/amcharts5";

// Create Sprite
am5.Sprite.new(root, {
  // ... config if applicable
});

<!-- Load Sprite -->
<script src="index.js"></script>

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

Inheritance

Sprite extends Entity.

Sprite is extended by Graphics, Container, Picture.

Settings

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

Read about settings concept.

active #	Type `undefined` \| `false` \| `true` Indicates if element is currently active.
ariaChecked #	Type `undefined` \| `false` \| `true` `aria-checked` setting. This setting is ignored unless `role` is one of the following: `"checkbox"` `"option"` `"radio"` `"menuitemcheckbox"` `"menuitemradio"` `"treeitem"`
ariaControls #	Type `undefined` \| `string` `aria-controls` setting.
ariaCurrent #	Type `undefined` \| `string` `aria-current` setting. Click here for more info @since 5.9.8
ariaHidden #	Type `undefined` \| `false` \| `true` `aria-hidden` setting.
ariaLabel #	Type `undefined` \| `string` Label for the element to use for screen readers. Click here for more info
ariaLive #	Type `AriaLive` `aria-live` setting.
ariaOrientation #	Type `undefined` \| `string` `aria-orientation` setting.
ariaSelected #	Type `undefined` \| `false` \| `true` `aria-selected` setting. Click here for more info @since 5.9.8
ariaValueMax #	Type `undefined` \| `string` `aria-valuemax` setting.
ariaValueMin #	Type `undefined` \| `string` `aria-valuemin` setting.
ariaValueNow #	Type `undefined` \| `string` `aria-valuenow` setting.
ariaValueText #	Type `undefined` \| `string` `aria-valuetext` setting.
blur #	Type `undefined` \| `number` Apply blur filter. Ranges of values in pixels: `0` to `X`. IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
brightness #	Type `undefined` \| `number` Modifty visual brightness. Range of values: `0` to `1`. IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
centerX #	Type `number` \| `Percent` X coordinate of the center of the element relative to itself. Center coordinates will affect placement as well as rotation pivot point.
centerY #	Type `number` \| `Percent` Y coordinate of the center of the element relative to itself. Center coordinates will affect placement as well as rotation pivot point.
clickAnnounceText #	Type `undefined` \| `string` If set, the text will be read out (announced) by a screen reader when focused element is "clicked" (by pressing ENTER or SPACE). @since 5.10.8
contrast #	Type `undefined` \| `number` Modify contrast. Range of values: `0` to `1`. IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
crisp #	Type `undefined` \| `false` \| `true` Default `false` If set to `true`, an element will try to draw itself in such way, that it looks crisp on screen, with minimal anti-aliasing. It will round x/y position so it is positioned fine "on pixel". It will also adjust `strokeWidth` based on device pixel ratio or zoom, so the line might look thinner than expected. NOTE: this is might not universally work, especially when set on several objects that are supposed to fit perfectly with each other. @since 5.3.0
cursorOverStyle #	Type `undefined` \| `string` A named mouse cursor style to show when hovering this element. Click here for more info
dateFormatter #	Type `DateFormatter` \| `undefined` An instance of `DateFormatter` that should be used instead of global formatter object. Click here for more info
disabled #	Type `undefined` \| `false` \| `true` Indicates if element is disabled.
draggable #	Type `undefined` \| `false` \| `true` If set to `true`, user will be able to drag this element. It will also disable default drag events over the area of this element.
durationFormatter #	Type `DurationFormatter` \| `undefined` An instance of `DurationFormatter` that should be used instead of global formatter object. Click here for more info
dx #	Type `undefined` \| `number` Horizontal shift in pixels. Can be negative to shift leftward.
dy #	Type `undefined` \| `number` Vertical shift in pixels. Can be negative to shift upward.
exportable #	Type `undefined` \| `false` \| `true` If set to `false` this element will not appear in exported snapshots of the chart.
focusable #	Type `undefined` \| `false` \| `true` Can element be focused, i.e. selected using TAB key. Click here for more info
focusableGroup #	Type `string` \| `number` An identifier by which to group common elements into focusable groups. If set, only the first element in he group will be focusable via TAB key. When it is selected, the rest of the elements in the same group can be selected using arrow keys. It allows users to TAB-through chart elements quickly without the need to TAB into each and every element. It's up to implementer of the charts to provide meaningful `ariaLabel` to the element, which advertises this capability and provides adequate instructions. Click here for more info @since 5.0.6
forceHidden #	Type `undefined` \| `false` \| `true` If set to `true` the element will be hidden regardless of `visible` or even if `show()` is called.
forceInactive #	Type `undefined` \| `false` \| `true` If set to `true` the element will be inactive - absolutely oblivious to all interactions, even if there are related events set, or the `interactive: true` is set. @since 5.0.21
height #	Type `number` \| `Percent` \| `null` Element's absolute height in pixels (numeric value) or relative height to parent (`Percent`);
hoverOnFocus #	Type `undefined` \| `false` \| `true` Simulate hover on an element when it gains focus, including changing hover appearance and displaying a tooltip if application. Click here for more info
hue #	Type `undefined` \| `number` Rotate HUE colors in degrees. Range of values: `0` to `360`. IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
id #	Type `undefined` \| `string` Inherited from `IEntitySettings` A custom string ID for the element. If set, element can be looked up via `root.entitiesById`. Will raise error if an element with the same ID already exists.
ignoreThemes #	Type `undefined` \| `false` \| `true` Default `false` Inherited from `IEntitySettings` If set to `true` the themes will be ignored when applying settings. @since 5.15.6
interactive #	Type `undefined` \| `false` \| `true` Should this element accept user interaction events?
invert #	Type `undefined` \| `number` Invert colors. Range of values: `0` (no changes) to `1` (completely inverted colors). IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
isMeasured #	Type `undefined` \| `false` \| `true` If set to `false` element will not be measured and cannot participate in layout schemes.
layer #	Type `undefined` \| `number` Numeric layer to put element in. Elements with higher number will appear in front of the ones with lower numer. If not set, will inherit layer from its ascendants.
layerMargin #	Type `IMargin` Margins for the layer. Can be used to make the layer larger/or smaller than default chart size. @since @5.2.39
marginBottom #	Type `undefined` \| `number` Bottom margin in pixels.
marginLeft #	Type `undefined` \| `number` Left margin in pixels.
marginRight #	Type `undefined` \| `number` Right margin in pixels.
marginTop #	Type `undefined` \| `number` Top margin in pixels.
maxHeight #	Type `number` \| `null` Maximum allowed height in pixels.
maxWidth #	Type `number` \| `null` Maximum allowed width in pixels.
minHeight #	Type `number` \| `null` Minimum allowed height in pixels.
minWidth #	Type `number` \| `null` Minimum allowed width in pixels.
numberFormatter #	Type `NumberFormatter` \| `undefined` An instance of `NumberFormatter` that should be used instead of global formatter object. Click here for more info
opacity #	Type `undefined` \| `number` Opacity. 0 - fully transparent; 1 - fully opaque.
position #	Type `"absolute"` \| `"relative"` Positioning of the element. `"absolute"` means element will not participate in parent layout scheme, and will be positioned solely accoridng its `x` and `y` settings.
role #	Type `Role` Element's role. Click here for more info
rotation #	Type `undefined` \| `number` Rotation in degrees.
saturate #	Type `undefined` \| `number` Modify saturation. Range of values in pixels: `0` to `X`. `0` - grayscale `1` - no changes `>1` - more saturated IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
scale #	Type `undefined` \| `number` Scale. Setting to a value less than 1 will shrink object.
sepia #	Type `undefined` \| `number` Apply sepia filter. Range of values: `0` (no changes) to `1` (complete sepia). IMPORTANT: This setting is not supported in Safari browsers. Click here for more info @since 5.5.0
showTooltipOn #	Type `"hover"` \| `"always"` \| `"click"` Default `"hover"` Defines when tooltip is shown over the element. Available options: `"hover"` (default) - tooltip is shown when element is hovered by a pointer or touched. It is hidden as soon as element is not hovered anymore, or touch occurs outside it. `"always"` - a tooltip will always be shown over the element, without any interactions. Please note that if you need to show tooltips for multiple elements at the same time, you need to explicitly create a `Tooltip` instance and set element's `tooltip` setting with it. '"click"' - a tooltip will only appear when target element is clicked/tapped. Tooltip will hide when clicking anywhere else on the page. Click here for more info @since 5.0.16
stateAnimationDuration #	Type `undefined` \| `number` Inherited from `IEntitySettings` Duration of transition from one state to another.
stateAnimationEasing #	Type `$ease.Easing` Inherited from `IEntitySettings` Easing of transition from one state to another.
tabindexOrder #	Type `undefined` \| `number` An internal order by which focusable elements will be selected within the chart. Click here for more info
templateField #	Type `undefined` \| `string` Allows binding element's settings to data. Click here for more info
themeTags #	Type `Array` Inherited from `IEntitySettings` Tags which can be used by the theme rules. Click here for more info
themeTagsSelf #	Type `Array` Inherited from `IEntitySettings` Tags which can be used by the theme rules. These tags only apply to this object, not any children. Click here for more info
themes #	Type `Array` Inherited from `IEntitySettings` A list of themes applied to the element.
toggleKey #	Type `"disabled"` \| `"active"` \| `"none"` \| `undefined` If set, element will toggle specified boolean setting between `true` and `false` when clicked/touched.
tooltip #	Type `Tooltip` `Tooltip` instance.
tooltipHTML #	Type `undefined` \| `string` HTML content to show in a tooltip when hovered. @since 5.2.11
tooltipPosition #	Type `"fixed"` \| `"pointer"` Tooltip position.
tooltipText #	Type `undefined` \| `string` Text to show in a tooltip when hovered.
tooltipX #	Type `number` \| `Percent` Tooltip pointer X coordinate relative to the element itself.
tooltipY #	Type `number` \| `Percent` Tooltip pointer Y coordinate relative to the element itself.
userData #	Type `any` Inherited from `IEntitySettings` A storage for any custom user data that needs to be associated with the element.
visible #	Type `undefined` \| `false` \| `true` Is element visible?
wheelable #	Type `undefined` \| `false` \| `true` If set to `true`, mouse wheel events will be triggered over the element. It will also disable page scrolling using mouse wheel when pointer is over the element.
width #	Type `number` \| `Percent` \| `null` Element's absolute width in pixels (numeric value) or relative width to parent (`Percent`);
x #	Type `number` \| `Percent` \| `null` X position relative to parent.
y #	Type `number` \| `Percent` \| `null` Y position relative to parent.
There are 8 inherited items currently hidden from this list.

Private settings

These are read-only settings accessible from a Sprite object using its getPrivate() method.

Read about private settings.

focusable #	Read only Type `undefined` \| `false` \| `true` If set to `false`, its tabindex will be set to -1, so it does not get focused with TAB, regardless whether its public setting `focusable` is set to `true`. @since 5.3.16
lastTooltipCoords #	Read only Type `IPoint` The last point the tooltip was shown at, so it is not shown again at the same place. @since 5.11.3
showingTooltip #	Read only Type `undefined` \| `false` \| `true` `true` while the element shows its tooltip.
tooltipTarget #	Read only Type `Graphics` An element whose tooltip point and colors the tooltip uses, in place of this element's.
trustBounds #	Read only Type `undefined` \| `false` \| `true` Checks that the pointer is within the element's bounds before dispatching `"pointerover"`. This prevents ghost tooltips that sometimes appear while the pointer moves over interactive elements. It is `true` by default on `Rectangle` and `Circle`. @since 5.5.0

Properties

adapters #	Type `Adapters` Default `new Adapters(this)` Inherited from `Entity`
className #	Static Type `string` Default `"Sprite"`
classNames #	Static Type `Array` Default `"Sprite", "Entity"`
dataItem #	Type `DataItem` \| `undefined` The element's `DataItem`, or, if it has none, its nearest parent's. NOTE: data items are assigned automatically in most cases where it matters. Set one only if you know what you are doing.
enableDispose #	Type `boolean` Default `true` Inherited from `Settings` Set to `false` to make `dispose()` do nothing.
events #	Type `SpriteEventDispatcher`
parent #	Type `Container` \| `undefined` Parent `Container` of this element.
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.
virtualParent #	Type `Container` \| `undefined`
There are 6 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
appear( duration?: `undefined` \| `number`, delay?: `undefined` \| `number` ) #	Returns `Promise` Plays the reveal animation: hides the element at once, then shows it, whether it was hidden or not.
compositeOpacity() #	Returns `number` Returns the element's opacity multiplied by those of all its parents. @since 5.2.11
compositeRotation() #	Returns `number` Returns the element's rotation plus those of all its parents, in degrees. @since 5.9.2
compositeScale() #	Returns `number` Returns the element's scale multiplied by those of all its parents. @since 5.9.2
depth() #	Returns `number` Returns how deep the element is in the tree: the number of parents it has.
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
getDateFormatter() #	Returns `DateFormatter` Returns the `DateFormatter` of the element: its own `dateFormatter`, or else the one of the `Root`. Click here for more info
getDurationFormatter() #	Returns `DurationFormatter` Returns the `DurationFormatter` of the element: its own `durationFormatter`, or else the one of the `Root`. Click here for more info
getNumberFormatter() #	Returns `NumberFormatter` Returns the `NumberFormatter` of the element: its own `numberFormatter`, or else the one of the `Root`. Click here for more info
getTooltip() #	Returns `Tooltip` \| `undefined` Returns the element's `Tooltip`: its own `tooltip`, or else the nearest parent's.
has( key: `Key` ) #	Returns `boolean` Inherited from `Settings` Returns `true` if setting `key` is set. Click here for more info
height() #	Returns `number` Returns the element's height in pixels.
hide( duration?: `undefined` \| `number` ) #	Returns `Promise` Hides the element and returns a `Promise` that resolves when its hiding animations finish. series.hide().then(function(ev) { console.log("Series finished hiding"); }) series.hide().then(function(ev) { console.log("Series finished hiding"); })
hideTooltip() #	Returns `Promise` \| `undefined` Hides the element's `Tooltip`.
hover() #	Returns `void` Hovers the element as if the pointer were over it: applies its hover state and shows its tooltip.
isDisposed() #	Returns `boolean` Inherited from `Settings` Returns `true` if the object has been disposed.
isDragging() #	Returns `boolean` Returns `true` while the element is being dragged.
isFocus() #	Returns `boolean` Returns `true` if this element does currently have focus.
isHidden() #	Returns `boolean` Returns `true` if the element was hidden with `hide()`, even while its hiding animation still plays. For the `visible` setting, use `isVisible()`.
isHiding() #	Returns `boolean` Returns `true` while the element's hiding animation plays.
isHover() #	Returns `boolean` Returns `true` if the pointer is over the element.
isShowing() #	Returns `boolean` Returns `true` while the element's showing animation plays.
isType( type: `string` ) #	Returns `this` Inherited from `Entity` Returns `true` if the object is of class `type` or extends it.
isVisible() #	Returns `boolean` Returns `false` if either the public or the private setting `visible` is `false`, or `forceHidden` is `true`.
isVisibleDeep() #	Returns `boolean` Same as `isVisible()`, except it checks all ascendants, too. @since 5.2.7
markDirtyKey( key: `Key` ) #	Returns `void` Marks a setting as changed, so the element reads it again, running its adapters, on the next frame.
maxHeight() #	Returns `number` Returns the most height the element may take, in pixels: its `maxHeight`, a fixed `height`, or else its parent's inner height.
maxWidth() #	Returns `number` Returns the most width the element may take, in pixels: its `maxWidth`, a fixed `width`, or else its parent's inner width.
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
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.
show( duration?: `undefined` \| `number` ) #	Returns `Promise` Shows the element and returns a `Promise` that resolves when its showing animations finish. series.show().then(function(ev) { console.log("Series is now fully visible"); }) series.show().then(function(ev) { console.log("Series is now fully visible"); })
showTooltip( point?: `IPoint` ) #	Returns `Promise` \| `undefined` Shows the element's `Tooltip`. Does nothing if the element has no `tooltipText` or `tooltipHTML`.
toBack() #	Returns `void` Moves the element to the start of its parent's children, so it is drawn under its siblings, or, in a layout, placed first.
toFront() #	Returns `void` Moves the element to the end of its parent's children, so it is drawn over its siblings, or, in a layout, placed last.
toGlobal( point: `IPoint` ) #	Returns `IPoint` Converts a point within the element to a point relative to the root.
toLocal( point: `IPoint` ) #	Returns `IPoint` Converts a point relative to the root to a point within the element.
unhover() #	Returns `void` Ends a hover, as if the pointer left the element: hides its tooltip and takes it out of its hover state.
width() #	Returns `number` Returns the element's width in pixels.
x() #	Returns `number` Returns the element's X position in pixels, relative to its parent, without `dx`.
y() #	Returns `number` Returns the element's Y position in pixels, relative to its parent, without `dy`.
There are 22 inherited items currently hidden from this list.

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

appear(

duration?: undefined | number,
delay?: undefined | number

)

Returns Promise

Plays the reveal animation: hides the element at once, then shows it, whether it was hidden or not.

compositeOpacity()

Returns number

Returns the element's opacity multiplied by those of all its parents.

@since 5.2.11

compositeRotation()

Returns number

Returns the element's rotation plus those of all its parents, in degrees.

@since 5.9.2

compositeScale()

Returns number

Returns the element's scale multiplied by those of all its parents.

@since 5.9.2

depth()

Returns number

Returns how deep the element is in the tree: the number of parents it has.

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

getDateFormatter()

Returns DateFormatter

Returns the DateFormatter of the element: its own dateFormatter, or else the one of the Root.

Click here for more info

getDurationFormatter()

Returns DurationFormatter

Returns the DurationFormatter of the element: its own durationFormatter, or else the one of the Root.

Click here for more info

getNumberFormatter()

Returns NumberFormatter

Returns the NumberFormatter of the element: its own numberFormatter, or else the one of the Root.

Click here for more info

getTooltip()

Returns Tooltip | undefined

Returns the element's Tooltip: its own tooltip, or else the nearest parent's.

has(

key: Key

)

Returns boolean

Inherited from Settings

Returns true if setting key is set.

Click here for more info

height()

Returns number

Returns the element's height in pixels.

hide(

duration?: undefined | number

)

Returns Promise

Hides the element and returns a Promise that resolves when its hiding animations finish.

series.hide().then(function(ev) {
  console.log("Series finished hiding");
})

series.hide().then(function(ev) {
  console.log("Series finished hiding");
})

hideTooltip()

Returns Promise | undefined

Hides the element's Tooltip.

hover()

Returns void

Hovers the element as if the pointer were over it: applies its hover state and shows its tooltip.

isDisposed()

Returns boolean

Inherited from Settings

Returns true if the object has been disposed.

isDragging()

Returns boolean

Returns true while the element is being dragged.

isFocus()

Returns boolean

Returns true if this element does currently have focus.

isHidden()

Returns boolean

Returns true if the element was hidden with hide(), even while its hiding animation still plays. For the visible setting, use isVisible().

isHiding()

Returns boolean

Returns true while the element's hiding animation plays.

isHover()

Returns boolean

Returns true if the pointer is over the element.

isShowing()

Returns boolean

Returns true while the element's showing animation plays.

isType(

type: string

)

Returns this

Inherited from Entity

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

isVisible()

Returns boolean

Returns false if either the public or the private setting visible is false, or forceHidden is true.

isVisibleDeep()

Returns boolean

Same as isVisible(), except it checks all ascendants, too.

@since 5.2.7

markDirtyKey(

key: Key

)

Returns void

Marks a setting as changed, so the element reads it again, running its adapters, on the next frame.

maxHeight()

Returns number

Returns the most height the element may take, in pixels: its maxHeight, a fixed height, or else its parent's inner height.

maxWidth()

Returns number

Returns the most width the element may take, in pixels: its maxWidth, a fixed width, or else its parent's inner width.

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

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.

show(

duration?: undefined | number

)

Returns Promise

Shows the element and returns a Promise that resolves when its showing animations finish.

series.show().then(function(ev) {
  console.log("Series is now fully visible");
})

series.show().then(function(ev) {
  console.log("Series is now fully visible");
})

showTooltip(

point?: IPoint

)

Returns Promise | undefined

Shows the element's Tooltip. Does nothing if the element has no tooltipText or tooltipHTML.

toBack()

Returns void

Moves the element to the start of its parent's children, so it is drawn under its siblings, or, in a layout, placed first.

toFront()

Returns void

Moves the element to the end of its parent's children, so it is drawn over its siblings, or, in a layout, placed last.

toGlobal(

point: IPoint

)

Returns IPoint

Converts a point within the element to a point relative to the root.

toLocal(

point: IPoint

)

Returns IPoint

Converts a point relative to the root to a point within the element.

unhover()

Returns void

Ends a hover, as if the pointer left the element: hides its tooltip and takes it out of its hover state.

width()

Returns number

Returns the element's width in pixels.

x()

Returns number

Returns the element's X position in pixels, relative to its parent, without dx.

y()

Returns number

Returns the element's Y position in pixels, relative to its parent, without dy.

There are 22 inherited items currently hidden from this list.

Events

Add event handlers to Sprite object using its events.on() method.

Read about adding event handlers.

#blur	Param { originalEvent: `FocusEvent`, target: `Sprite`, type: `"blur"`, target: `this` } Invoked when element loses focus.
#boundschanged	Param { type: `"boundschanged"`, target: `this` } The element's bounds changed.
#click	Param { type: `"click"`, target: `this` } The element was clicked or tapped. A press and release more than 5 pixels apart is not a click.
#dataitemchanged	Param { newDataItem: `DataItem` \| `undefined`, oldDataItem: `DataItem` \| `undefined`, type: `"dataitemchanged"`, target: `this` } The element's data item changed.
#dblclick	Param { type: `"dblclick"`, target: `this` } The element was double-clicked or double-tapped. Also dispatched on its parents.
#dragged	Param { type: `"dragged"`, target: `this` } The element moved while being dragged.
#dragstart	Param { type: `"dragstart"`, target: `this` } Dragging of the element started: the pointer moved more than 5 pixels after pressing on it.
#dragstop	Param { type: `"dragstop"`, target: `this` } Dragging of the element stopped.
#focus	Param { originalEvent: `FocusEvent`, target: `Sprite`, type: `"focus"`, target: `this` } Invoked when element gains focus.
#globalpointerdown	Param { type: `"globalpointerdown"`, target: `this` } A pointer button was pressed, or a touch started, anywhere in the window, even outside the chart.
#globalpointermove	Param { type: `"globalpointermove"`, target: `this` } The pointer moved anywhere in the window, even outside the chart.
#globalpointerup	Param { type: `"globalpointerup"`, target: `this` } A pointer button was released, or a touch ended, anywhere in the window, even outside the chart.
#middleclick	Param { type: `"middleclick"`, target: `this` } The element was clicked with the middle mouse button.
#pointerdown	Param { type: `"pointerdown"`, target: `this` } A pointer button was pressed, or a touch started, over the element. Also dispatched on its parents.
#pointerout	Param { type: `"pointerout"`, target: `this` } The pointer left the element.
#pointerover	Param { type: `"pointerover"`, target: `this` } The pointer moved over the element.
#pointerup	Param { type: `"pointerup"`, target: `this` } A pointer button was released, or a touch ended, over the element.
#positionchanged	Param { type: `"positionchanged"`, target: `this` } The element's position changed.
#rightclick	Param { type: `"rightclick"`, target: `this` } The element was clicked with the right mouse button.
#wheel	Param { originalEvent: `WheelEvent`, point: `IPoint`, type: `"wheel"`, target: `this` } The mouse wheel turned while the pointer was over the element. Also dispatched on its parents.