ISpriteSettings

Type interface

Inheritance

ISpriteSettings extends IEntitySettings, any.

ISpriteSettings is extended by IGraphicsSettings, IContainerSettings, IPictureSettings.

Properties

active
#

Type undefined | false | true

Indicates if element is currently active.

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.

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.

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

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 am5.registry.entitiesById.

Will raise error if an element with the same ID already exists.

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.

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.

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 7 inherited items currently hidden from this list.