Search results

Range in React Range Navigator component

24 Sep 2021 / 1 minute to read

The Range Selector’s left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways:

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and the end through the value property.
Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';

class App extends React.Component<{}, {}> {

  public data: object[] = bitCoinData;
  public tooltip: RangeTooltipSettingsModel = { enable: true };

  render() {
return <RangeNavigatorComponent id='charts'
  valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
  tooltip={this.tooltip}>
  <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
  <RangenavigatorSeriesCollectionDirective>
    <RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
  </RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
  }

};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = bitCoinData;
        this.tooltip = { enable: true };
    }
    render() {
        return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip}>
  <Inject services={[AreaSeries, DateTime, RangeTooltip]}/>
  <RangenavigatorSeriesCollectionDirective>
    <RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
  </RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));