DateAxisRangeSelector – amCharts 4 Documentation

Type class

Creates a control used to select date range and preset periods for a DateAxis.

let selector = new am4plugins_rangeSelector.DateAxisRangeSelector()
selector.container = document.getElementById("selectordiv");
selector.axis = chart.xAxes.getIndex(0);

var selector = new am4plugins_rangeSelector.DateAxisRangeSelector()
selector.container = document.getElementById("selectordiv");
selector.axis = chart.xAxes.getIndex(0);

Click here for more information on how to use this plugin
@todo JSON example

Sources

This information about DateAxisRangeSelector is provided for reference only and is not available through exported packages and thus should not be imported or used on its own.

Inheritance

DateAxisRangeSelector extends RangeSelector.

DateAxisRangeSelector is not extended by any other symbol.

Properties

axis #	Type `this["_axis"]` Inherited from `RangeSelector` A target axis to use range selector for.
classPrefix #	Type `string` Default `"amexport"` Inherited from `RangeSelector` Class name prefix.
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.
container #	Type `$type.Optional` < `HTMLElement` > Inherited from `RangeSelector` An HTML container to place the control in. A container must be an HTML element, because the control itself is HTML, and cannot be placed into SVG.
dateFormatter #	Type `DateFormatter` A `DateFormatter` instance to use. If not set, control will inherit one from the target axis.
defaultStyles #	Type `boolean` Default `true` Inherited from `RangeSelector` Indicates whether `RangeSelector` should load external CSS to style itself. If set to `false`, the elements will not be styled, and will rely on some external CSS.
events #	Type `EventDispatcher` < `AMEvent` < `this`, `IDateAxisRangeSelectorEvents` > > Inherited from `BaseObjectEvents` An `EventDispatcher` instance
id #	Type `$type.Optional` < `string` > Inherited from `BaseObject` Sets the user-defined id of the element.
inputDateFormat #	Type `string` Default `"yyyy-MM-dd"` An format to use for the date input fields. If not set, it will use `dateFormat` from the `DateFormatter` object.
language #	Type `Language` Inherited from `RangeSelector` A `Language` instance.
periods #	Type `IDateAxisRangeSelectorPeriod[]` A list of pre-defined periods to show buttons for.
position #	Type `"top"` \| `"bottom"` \| `"left"` \| `"right"` Default `"left"` Inherited from `RangeSelector` Position of the selector. Available options: `"top"`, `"bottom"`, `"left"` (default), and `"right"`. NOTE: since the control is always placed in the external container, this setting does actually affect where the control is placed but rather default CSS that affects how specific elements are arranged. For example, when setting position to `"top"` or `"bottom"`, the control will be arranged in a horizontal fashion. Similarly, for `"left"` and `"right"` the control will arrange itself vertically, which is more suitable for narrow containers.
tabindex #	Type `number` Inherited from `RangeSelector` A tab index for the menu. Tab index will influence the order in which elements on the chart and the whole page are selected when pressing TAB key.
uid #	Type `string` Inherited from `BaseObject` Returns object's internal unique ID.
zoomDelay #	Type `number` Default `500` Number of milliseconds to wait after last keystroke in date input field before zooming the axis.
There are 12 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 `DateAxisRangeSelector` 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` Inherited from `RangeSelector` Destroys the control and all its elements.
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.
setPeriodInterval( interval: `ITimeInterval` \| `"ytd"` \| `"max"`, simulated: `boolean` ) #	Returns `void` Zooms the axis to a preset time interal or `"ytd"` or `"max"`.
zoomToDates( date: `Date` ) #	Returns `void` Zooms the axis using start date.
There are 7 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 DateAxisRangeSelector

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

Inherited from RangeSelector

Destroys the control and all its elements.

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.

setPeriodInterval(

interval: ITimeInterval | "ytd" | "max",
simulated: boolean

)

Returns void

Zooms the axis to a preset time interal or "ytd" or "max".

zoomToDates(

date: Date

)

Returns void

Zooms the axis using start date.

There are 7 inherited items currently hidden from this list.

Events

#drawn	Param { type: `"drawn"`, target: `this` } Inherited from `IRangeSelectorEvents` Invoked when control is drawn.
#periodselected	Param { interval: `ITimeInterval`, startDate: `Date`, type: `"periodselected"`, target: `this` } Invoked when pre-defined period is selected (button clicked). @since 4.10.3
#positionset	Param { position: `"top"` \| `"bottom"` \| `"left"` \| `"right"`, prevPosition: `"top"` \| `"bottom"` \| `"left"` \| `"right"`, type: `"positionset"`, target: `this` } Inherited from `IRangeSelectorEvents` Invoked when position of the control changes.
There are 2 inherited items currently hidden from this list.

Adapters

DateAxisRangeSelector does not have any adapters.