Example of DateTime in React Range Selector Component


This sample visualizes rendering of date-time in the range navigator with exchange rate analysis of EUR to USD.

More Details...


Date-time data is used in this sample, and the selected range values are showed with tooltip. Date-time axis uses date-time scale and displays date-time values as axis labels. To render date-time axis, set the valueType to DateTime. Format of the axis label will be calculated based on the intervalType of the range navigator. You can also directly set the format using the labelFormat property.

Injecting Module

The range navigator component features are segregated into individual feature-wise modules. To use area series, inject the AreaSeries module using RangeNavigator.Inject(AreaSeries) method. To use date time axis, inject the DateTime module using RangeNavigator.Inject(DateTime) method.