Example of Default in Angular Range Selector Component

This sample visualizes the bitcoin price range with area series in the range navigator. Selected range values are enhanced with tooltip.

Bitcoin (USD) Price Range

09/01/2017
02/01/2018
May-17Jun-17Jul-17Aug-17Sep-17Oct-17Nov-17Dec-17Jan-18Feb-18Mar-18Apr-18
Description

In this example, you can see how to render and configure the range navigator with area type series. tooltip is used to represent selected data value. You can also use selectedRegionColor and unselectedRegionColor properties to customize selected and unselected area in range navigator.


Injecting Module

The range navigator component features are segregated into individual feature-wise modules. To use date-time axis and tooltip, we need to inject the DateTimeService and RangeTooltipService module into the @NgModule.providers section.