R t l in React Range navigator component

20 Jan 20232 minutes to read

The Range Selector supports right-to-left (RTL), which can be enabled with the enableRtl property.

index.jsx

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';
function App() {
  const data = bitCoinData;
  const tooltip = { enable: true };
  return <RangeNavigatorComponent id='charts' valueType='DateTime' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={tooltip} enableRtl={true}>
    <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    <RangenavigatorSeriesCollectionDirective>
      <RangenavigatorSeriesDirective dataSource={data} xName='x' yName='y' type='Area' width={2} />
    </RangenavigatorSeriesCollectionDirective>
  </RangeNavigatorComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

index.tsx

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';

function App() {

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

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

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));