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';
function App() {
  const data = GetDateTimeData(new Date(2018, 0, 1), new Date(2019, 0, 1));

  return <RangeNavigatorComponent id='charts' valueType='DateTime' intervalType='Months' labelFormat='MMM' value={[new Date('2018-04-1'), new Date('2018-08-1')]} dataSource={data} xName='x' yName='y'>
    <Inject services={[DateTime]} />
  </RangeNavigatorComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
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';

function App() {

  const data: object[] = GetDateTimeData(new Date(2018, 0, 1), new Date(2019, 0, 1));

  return <RangeNavigatorComponent id='charts'
    valueType='DateTime' intervalType='Months' labelFormat='MMM'
    value={[new Date('2018-04-1'), new Date('2018-08-1')]}
    dataSource={data} xName='x' yName='y'>
    <Inject services={[DateTime]} />
  </RangeNavigatorComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

See Also