Getting Started with React Range Navigator

10 Aug 20269 minutes to read

This section describes the steps to create a simple Range Navigator and demonstrates the basic usage of the Range Navigator component.

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® React UI components. That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.

Dependencies

When you install @syncfusion/ej2-react-charts, the following peer dependencies are installed automatically:

|-- @syncfusion/ej2-react-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-svg-base

Set up a development environment

To set up a React application quickly, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up the environment using JavaScript and optimizes applications for production.

As an alternative, you can create a React application using create-react-app. For detailed instructions, refer to this documentation.

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

npm create vite@latest my-app -- --template react

React with TypeScript

npm create vite@latest my-app -- --template react-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Install Syncfusion® React Range Navigator package

All the available Essential® JS 2 packages are published in the npmjs.com public registry.

To install the Range Navigator package, run the following command from the project folder:

npm install @syncfusion/ej2-react-charts

Add the Range Navigator to the project

Open the application entry file (src/App.jsx or src/App.tsx) and the Range Navigator component using the following code.

import { RangeNavigatorComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import { createRoot } from 'react-dom/client';

function App() {
    return <RangeNavigatorComponent id="charts"/>;
}

export default App;

const root = createRoot(document.getElementById('charts'));
root.render(<App />);
import { RangeNavigatorComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import { createRoot } from 'react-dom/client';

function App() {
  return <RangeNavigatorComponent id="charts" />
}

export default App;
const root = createRoot(document.getElementById('charts'));
root.render(<App />);

Inject Required Modules

The Range Navigator is segregated into individual feature-wise modules. To use a particular feature, you need to inject its feature service in the services of the Inject component. The following services are commonly used to extend the Range Navigator’s basic functionality.

  • AreaSeries - Inject this module in to services to use the area series.
  • DateTime - Inject this module in to services to use the DateTime axis.
  • RangeTooltip - Inject this module in to services to use the tooltip feature.

Import the required module from the Chart package and register it through the Inject component as shown below.

import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject } from "@syncfusion/ej2-react-charts";
import * as React from "react";

function App() {
  return (
    <RangeNavigatorComponent id="range-navigator">
      <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
    </RangeNavigatorComponent>
  );
}

export default App;

Populate Range Navigator with data

Add a series object to the Range Navigator by using the series property. Map the JSON fields x and y to the series xName and yName properties, and set the JSON array as the dataSource property.

Since the JSON contains category data, set the valueType for the horizontal axis (primaryXAxis) to Category. By default, the axis valueType is Numeric.

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

function App() {
  const data = bitCoinData;

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

export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);
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';

function App() {

  const data: object[] = bitCoinData;

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

}

export default App;

const root = ReactDOM.createRoot(document.getElementById('charts'));
root.render(<App />);

Run the application

Run the application using the following command:

npm run dev

Troubleshooting

Use the following guidance to resolve common issues when getting started with the Range Navigator component.

  • Range Navigator does not render (blank page)
    • Verify that index.html contains a container with id="root", and that main.tsx/main.jsx calls ReactDOM.createRoot(document.getElementById("root")) followed by root.render(<App />).
    • Run npm install again to ensure all peer dependencies listed in the Dependencies section are installed.
  • Tooltip is not visible after setting tooltip.enable = true
    • Confirm that the RangeTooltip module is included in the services array of the Inject component as shown in the Module injection and Enable tooltip sections.
  • Series data is not plotted or appears empty
    • Confirm that the dataSource array contains objects with property names matching xName and yName (case sensitive).
    • If the x field holds Date values, set the valueType of primaryXAxis to DateTime; for string categories use Category.
  • TypeScript errors on import
    • Ensure @types/react and @types/react-dom are installed. The Syncfusion package ships with its own types, so no additional type packages are required.
  • Module not found: Can't resolve '@syncfusion/ej2-react-charts'
    • The package was not installed in the current project. Run npm install @syncfusion/ej2-react-charts from the project root.
  • ERESOLVE peer-dependency errors during installation
    • A React or Node.js version mismatch is the most common cause. Install a supported React version (18 or 19) and Node.js 18 or later, then delete node_modules and package-lock.json and run npm install again.
  • Build or dev server fails to start
    • Confirm that you are using a supported Node.js version (Node 18 or later for the latest Vite templates).
    • Delete node_modules and package-lock.json, then run npm install again.

See also

Explore the following related topics: