RangeNavigatorComponent

RangeNavigator Component

<ejs-rangenavigator></ejs-rangenavigator>

Properties

allowIntervalData

boolean

Allow the data to be selected for that particular interval while clicking the particular label

allowSnapping

boolean

Enable snapping for range navigator sliders

Defaults to false

animationDuration

number

Duration of the animation

Defaults to 500

areaSeriesModule

AreaSeries

areaSeriesModule is used to add area series in the chart.

background

string

The background color of the chart that accepts value in hex and rgba as a valid CSS color string.

Defaults to null

dataSource

Object | DataManager

It defines the data source for a range navigator.

Defaults to null

dateTimeModule

DateTime

datetimeModule is used to manipulate and add dateTime axis to the chart.

disableRangeSelector

boolean

To render the period selector with out range navigator.

Defaults to false

doubleModule

Double

doubleModule is used to manipulate and add double axis to the chart.

enableDeferredUpdate

boolean

Enable deferred update for the range navigator

Defaults to false

enableGrouping

boolean

Enable grouping for the labels

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

groupBy

string

GroupBy property for the axis

Defaults to Auto

height

string

The height of the chart as a string accepts input both as ‘100px’ or ‘100%‘. If specified as ‘100%, range navigator renders to the full height of its parent element.

Defaults to null

interval

number

interval value for the axis

Defaults to null

intervalType

string

IntervalType for the dateTime axis

Defaults to ‘Auto’

labelFormat

string

Used to format the axis label that accepts any global string format like ‘C’, ‘n1’, ‘P’ etc. It also accepts placeholder like ‘{value}°C’ in which value represent the axis label, e.g, 20°C.

Defaults to ”

labelIntersectAction

string

Specifies, when the axis labels intersect with each other.They are,

• None: Shows all the labels.
• Hide: Hides the label when it intersects.

Defaults to Hide

labelPosition

string

Label positions for the axis

Defaults to ‘Outside’

labelStyle

FontModel

Label style for the labels

lineSeriesModule

LineSeries

lineSeriesModule is used to add line series to the chart.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

logBase

number

base value for log axis

Defaults to 10

logarithmicModule

Logarithmic

logarithmicModule is used to manipulate and add log axis to the chart.

majorGridLines

MajorGridLinesModel

MajorGridLines

majorTickLines

MajorTickLinesModel

MajorTickLines

margin

MarginModel

Margin for the range navigator

maximum

number | Date

Maximum value for the axis

Defaults to null

minimum

number | Date

Minimum value for the axis

Defaults to null

navigatorBorder

BorderModel

Options for customizing the color and width of the chart border.

navigatorStyleSettings

StyleSettingsModel

Navigator style settings

periodSelectorModule

PeriodSelector

periodSelectorModule is used to add period selector un range navigator

periodSelectorSettings

PeriodSelectorSettingsModel

Period selector settings

query

Query

It defines the query for the data source.

Defaults to null

rangeTooltipModule

RangeTooltip

tooltipModule is used to manipulate and add tooltip to the series.

secondaryLabelAlignment

string

It specifies the label alignment for secondary axis labels

Defaults to ‘Middle’

series

RangeNavigatorSeriesModel[]

It defines the configuration of series in the range navigator

skeleton

string

Specifies the skeleton format in which the dateTime format will process.

Defaults to ”

skeletonType

string

It specifies the type of format to be used in dateTime format process.

Defaults to ‘DateTime’

stepLineSeriesModule

StepLineSeries

stepLineSeriesModule is used to add stepLine series in the chart.

theme

string

Specifies the theme for the range navigator.

Defaults to ‘Material’

tickPosition

string

Tick Position for the axis

Defaults to ‘Outside’

tooltip

RangeTooltipSettingsModel

Options for customizing the tooltip of the chart.

useGroupingSeparator

boolean

Specifies whether a grouping separator should be used for a number.

Defaults to false

value

number[] | Date[]

Selected range for range navigator.

Defaults to []

valueType

string

ValueType for the axis

Defaults to ‘Double’

width

string

The width of the range navigator as a string accepts input as both like ‘100px’ or ‘100%‘. If specified as ‘100%, range navigator renders to the full width of its parent element.

Defaults to null

xName

string

It defines the xName for the range navigator.

Defaults to null

yName

string

It defines the yName for the range navigator.

Defaults to null

Methods

createSecondaryElement

Creating secondary range navigator

Returns void

destroy

To destroy the widget

Returns void

export

Handles the export method for range navigator control.

Returns void

getModuleName

To get the module name of the widget

Returns string

onPropertyChanged

OnProperty change method calling here

Returns void

preRender

Starting point of the control initialization

Returns void

print

Handles the print method for range navigator control.

Returns void

render

To render the range navigator

Returns void

renderChart

Creating Chart for range navigator

Returns void

Events

beforePrint

EmitType<IPrintEventArgs>

Triggers before the prints gets started.

beforeResize

EmitType<IRangeBeforeResizeEventArgs>

Triggers before window resize.

changed

EmitType<IChangedEventArgs>

Triggers after change the slider.

labelRender

EmitType<ILabelRenderEventsArgs>

Triggers before the label rendering

load

EmitType<IRangeLoadedEventArgs>

Triggers before the range navigator rendering

loaded

EmitType<IRangeLoadedEventArgs>

Triggers after the range navigator rendering

resized

EmitType<IResizeRangeNavigatorEventArgs>

Triggers after the range navigator resized

selectorRender

EmitType<IRangeSelectorRenderEventArgs>

Triggers before the range navigator selector rendering

tooltipRender

EmitType<IRangeTooltipRenderEventArgs>

Triggers before the tooltip for series is rendered.