RangeNavigatorComponent

23 Sep 20258 minutes to read

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

dateTimeCategoryModule DateTimeCategory

dateTimeCategoryModule is used to manipulate and add dateTimeCategory axis to the chart.

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 RangeIntervalType

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 RangeIntervalType

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 RangeLabelIntersectAction

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

labelPlacement NavigatorPlacement

Specifies the placement of labels to the axis line. They are,
betweenTicks - Render the label between the ticks.
onTicks - Render the label on the ticks.
auto - Render the label between or on the tick based on data.

Defaults to ‘Auto’

labelPosition AxisPosition

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

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

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 LabelAlignment

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 SkeletonType

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 ChartTheme

Specifies the theme for the range navigator.

Defaults to ‘Material’

tickPosition AxisPosition

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 RangeValueType

Specifies the data types that the axis can handle:

  • Double: This type is used for rendering a numeric axis to accommodate numeric data.
  • DateTime: This type is utilized for rendering a date-time axis to manage date-time data.
  • Logarithmic: This type is applied for rendering a logarithmic axis to handle a wide range of values.
  • DateTimeCategory: This type is used to render a date time category axis for managing business days.

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.

Parameter Type Description
type ExportType The type of export.
fileName string The name of the file for export.
orientation (optional) PdfPageOrientation The orientation of the PDF page.
controls (optional) [] Array of controls to be exported.
width (optional) number The width of the exported content.
height (optional) number The height of the exported content.
isVertical (optional) boolean Indicates whether the export is vertical.

Returns void

getModuleName

To get the module name of the widget.

Returns string

onPropertyChanged

OnProperty change method calling here.

Parameter Type Description
newProp RangeNavigatorModel The new RangeNavigatorModel.

Returns void

preRender

Starting point of the control initialization.

Returns void

print

Handles the print method for range navigator control.

Parameter Type Description
id (optional) string[] | string | Element The id of the range navigator to be printed on the page.

Returns void

render

To render the range navigator.

Returns void

renderChart

Creating Chart for range navigator.

Parameter Type Description
resize (optional) boolean Indicates whether the chart should be resized.

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.