Customization in React Range navigator component
20 Jan 202318 minutes to read
Navigator appearance
The Range Selector can be customized by using the navigatorStyleSettings. The selectedRegionColor property is used to specify the color for the selected region, whereas the unselectedRegionColor property is used to specify the color for the unselected region.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data = bitCoinData; const tooltip = { enable: true }; const navigatorstylesettings = { unselectedRegionColor: 'skyblue', selectedRegionColor: 'pink' }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} navigatorStyleSettings={navigatorstylesettings} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent>; } ; export default App; ReactDOM.render(<App />, document.getElementById("charts"));import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel, StyleSettingsModel } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data: object[] = bitCoinData; const tooltip: RangeTooltipSettingsModel = { enable: true }; const navigatorstylesettings: StyleSettingsModel = { unselectedRegionColor: 'skyblue', selectedRegionColor: 'pink' }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} navigatorStyleSettings={navigatorstylesettings} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent> }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));Thumb
The thumb property allows to customize the border, fill color, size, and type of thumb. Thumbs can be of two shapes: Circle and Rectangle.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data = bitCoinData; const tooltip = { enable: true }; const navigatorstylesettings = { thumb: { type: 'Rectangle', border: { width: 2, color: 'red' }, fill: 'pink' } }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} navigatorStyleSettings={navigatorstylesettings} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent>; }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel, StyleSettingsModel } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data: object[] = bitCoinData; const tooltip: RangeTooltipSettingsModel = { enable: true }; const navigatorstylesettings: StyleSettingsModel = { thumb: { type: 'Rectangle', border: { width: 2, color: 'red' }, fill: 'pink' } }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} navigatorStyleSettings={navigatorstylesettings} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent> }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));Border customization
Using the navigatorBorder, the width and color of the Range Selector border can be customized.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data = bitCoinData; const tooltip = { enable: true }; const border = { width: 4, color: 'green' }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} navigatorBorder={border} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent>; }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data: object[] = bitCoinData; const tooltip: RangeTooltipSettingsModel = { enable: true }; const border = { width: 4, color: 'green' }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} navigatorBorder={border} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent> }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));Deferred update
If the enableDeferredUpdate property is set to true, then the changed event will be triggered after dragging the slider. If the enableDeferredUpdate is false, then the changed event will be triggered when dragging the slider. By default, the enableDeferredUpdate is set to false.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data = bitCoinData; const tooltip = { enable: true }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent>; }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data: object[] = bitCoinData; const tooltip: RangeTooltipSettingsModel = { enable: true }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent> }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));Allow snapping
The allowSnapping property toggles the placement of the slider exactly to the left or on the nearest interval.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data = bitCoinData; const tooltip = { enable: true }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} allowSnapping={true} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent>; }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data: object[] = bitCoinData; const tooltip: RangeTooltipSettingsModel = { enable: true }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} allowSnapping={true} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent> }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));Animation
The speed of the animation can be controlled using the animationDuration property. The default value of the animationDuration property is 500 milliseconds.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data = bitCoinData; const tooltip = { enable: true }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} animationDuration={2000} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent>; }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, RangeTooltipSettingsModel } from '@syncfusion/ej2-react-charts'; import * as React from "react"; import * as ReactDOM from "react-dom"; import { bitCoinData } from 'default-data.ts'; function App() { const data: object[] = bitCoinData; const tooltip: RangeTooltipSettingsModel = { enable: true }; return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} animationDuration={2000} tooltip={tooltip}> <Inject services={[AreaSeries, DateTime, RangeTooltip]} /> <RangenavigatorSeriesCollectionDirective> <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} /> </RangenavigatorSeriesCollectionDirective> </RangeNavigatorComponent> }; export default App; ReactDOM.render(<App />, document.getElementById("charts"));