Search results

Range Selector in React Stock Chart component

30 Jan 2023 / 2 minutes to read

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.

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and end through Date Range button.

Following code example shows the enableSelector property allows users to toggle the visibility of range selector.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
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"));
Copied to clipboard
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"));