Lightweight in React Range navigator component
20 Jan 20232 minutes to read
By default, when the dataSource
for series
is empty, a lightweight Range Selector will be shown without Chart.
import { DateTime, Inject, RangeNavigatorComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GetDateTimeData } from 'default_data.ts';
class App extends React.Component {
data = GetDateTimeData(new Date(2018, 0, 1), new Date(2019, 0, 1));
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' intervalType='Months' labelFormat='MMM' value={[new Date('2018-04-1'), new Date('2018-08-1')]} value={[new Date('2018-06-01'), new Date('2018-10-01')]} dataSource={this.data} xName='x' yName='y'>
<Inject services={[DateTime]}/>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
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 { GetDateTimeData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = GetDateTimeData(new Date(2018, 0, 1), new Date(2019, 0, 1));
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' intervalType='Months' labelFormat='MMM'
value={[new Date('2018-04-1'), new Date('2018-08-1')]} value={[new Date('2018-06-01'), new Date('2018-10-01')]}
dataSource={this.data} xName='x' yName='y'>
<Inject services={[DateTime]} />
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));