Series types in React Range navigator component
20 Jan 20239 minutes to read
To render the data, the Range Selector supports three types of series.
Line
To render a line series, use series type
as Line and inject the LineSeries
module using RangeNavigator.Inject(LineSeries)
method. By default, the line series is rendered in the Range Selector.
import { LineSeries, 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 {
data = bitCoinData;
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={[LineSeries, DateTime, RangeTooltip]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
LineSeries, 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={[LineSeries, DateTime, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Line' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Area
To render an area series, use series type
as Area and inject AreaSeries
module using RangeNavigator.Inject(AreaSeries)
method.
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 {
data = bitCoinData;
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"));
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"));
StepLine
To render a Step line series, use series type
as Step Line and inject StepLineSeries
module using RangeNavigator.Inject(StepLineSeries)
method.
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component {
data = double;
tooltip = { enable: true };
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' tooltip={this.tooltip} value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = double;
public tooltip: RangeTooltipSettingsModel = { enable: true };
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
tooltip={this.tooltip}
value={[12, 30]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));