Responsive – amCharts 4 Documentation

Type class

Responsive is responsible for overriding certain properties when conditions are met.

This class is used to dynamically apply and change certain chart properties based on the current values of properties.

Mainly, this is used with Sprite's dimensional properties, like pixelWidth and pixelHeight. However, it can be used to dynamically change any property, based on any other property's value.

A default responsive rules are disabled.

To enable, set enabled = false. E.g.:

chart.responsive.enabled = true;

chart.responsive.enabled = true;

IResponsiveEvents for a list of available events
IResponsiveAdapters for a list of available Adapters
@todo Add default rules
@todo Watch for rule modification

Sources

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

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

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

Inheritance

Responsive extends BaseObjectEvents.

Responsive is not extended by any other symbol.

Properties

adapter #	Type `Adapter` < `this`, `IResponsiveAdapters` > Default `new Adapter<this, IResponsiveAdapters>(this)` Adapter.
allRules #	Type `List` < `IResponsiveRule` > Returns all rules: default rules (if not disabled) combined with user-defined ones. @readonly
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.
component #	Type `$type.Optional` < `Component` > A target object that responsive rules will need to be applied to.
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.
defaultRules #	Type `List` < `IResponsiveRule` > Default responsive rules. @readonly
enabled #	Type `boolean` Default `false` Should responsive rules be checked against and applied?
events #	Type `EventDispatcher` < `AMEvent` < `this`, `IResponsiveEvents` > > Inherited from `BaseObjectEvents` An `EventDispatcher` instance
id #	Type `$type.Optional` < `string` > Inherited from `BaseObject` Sets the user-defined id of the element.
rules #	Type `List` < `IResponsiveRule` > User-defined responsive rules. User-defined rules will take precedence over default rules whenever they produce conflicting settings. Use `allRules` to get all applicable rules including default and user-defined ones.
uid #	Type `string` Inherited from `BaseObject` Returns object's internal unique ID.
useDefault #	Type `boolean` Default `true` Should default responsive rules be applied in addition to user-defined ones. User-defined rules will take precedence over default rules whenever they produce conflicting settings.
There are 5 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() #	Returns `Responsive` Constructor
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 the 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 6 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()

Returns Responsive

Constructor

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

Events

#ruleapplied	Param { rule: `IResponsiveRule`, type: `"ruleapplied"`, target: `this` } Invoked after each rule is applied to the actual element.
#ruleschanged	Param { type: `"ruleschanged"`, target: `this` } Invoked when a list of applicable rules for the current resolution changes.

#ruleapplied

Param { rule: IResponsiveRule,
type: "ruleapplied",
target: this }

Invoked after each rule is applied to the actual element.

#ruleschanged

Param { type: "ruleschanged",
target: this }

Invoked when a list of applicable rules for the current resolution changes.

Adapters

#allRules	Param `List` < `IResponsiveRule` > A list of all rules - user-defined and default combined.
#defaultRules	Param `List` < `IResponsiveRule` > A list of default rules.
#enabled	Param `boolean` Are responsive features enabled?
#rules	Param `List` < `IResponsiveRule` > A list of user-defined rules.
#useDefault	Param `boolean` Use default rules? If this is set `false`, only user-defined rules will be applied.