The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.
Following code example shows the enableSelector property allows users to toggle the visibility of range selector.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
};
const primaryyAxis = {
majorTickLines: { width: 0 },
crosshairTooltip: { enable: true }
};
const crosshair = { enable: true };
return <StockChartComponent id='stockcharts' enableSelector={true} primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} crosshair={crosshair} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
};
const primaryyAxis: AxisModel= {
majorTickLines: { width: 0 },
crosshairTooltip: { enable: true }
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
return <StockChartComponent id='stockcharts'
enableSelector={true}
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
crosshair={crosshair}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));