Getting Started with React Linear Gauge

This section explains the steps required to create a simple React Linear Gauge component and demonstrate its basic usage in a React environment.

To get started quickly with React Linear Gauge, you can watch this video:

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.

  • Basic knowledge of React and TypeScript (recommended)
  • A code editor like Visual Studio Code

Dependencies

The following list shows the minimum dependencies required to use the Linear Gauge component. These are installed automatically when you install @syncfusion/ej2-react-lineargauge.

+-- @syncfusion/ej2-react-lineargauge
|-- @syncfusion/ej2-lineargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-pdf-export
|-- @syncfusion/ej2-react-base

Setup for local development

Easily set up a React application using Vite, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. Vite sets up your environment using JavaScript and optimizes your application for production.

To create a new React application, run the following command.

npm create vite@latest my-app

This command will prompt you for a few settings for the new project, such as selecting a framework and a variant. Use the --template flag shown below to skip these prompts.

To set up a React application in a TypeScript environment, run the following commands.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

To set up a React application in a JavaScript environment, run the following commands.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Adding Syncfusion® React Linear Gauge packages

All the available Essential® JS 2 packages are published in the npmjs.com public registry. To install the Linear Gauge component, use the following command.

npm install @syncfusion/ej2-react-lineargauge

Adding Linear Gauge component

The React Linear Gauge component can be added to the application by following these steps. Add the Linear Gauge component to the src/App.tsx (or src/App.jsx) file using the following code.

import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
import * as React from 'react';

function App() {
    return <LinearGaugeComponent></LinearGaugeComponent>
}
export default App;
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
import * as React from 'react';

function App() {
    return <LinearGaugeComponent></LinearGaugeComponent>
}
export default App;

Make sure your src/main.tsx (or src/main.jsx) file renders the App component inside an element with id="container". A minimal example is shown below.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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

Module Injection

React Linear Gauge component features are segregated into individual feature-wise modules. To use a particular feature, you need to inject its feature service in the App. The relevant feature service names and descriptions are listed below.

  • Annotations - Inject this module to use the annotation feature.
  • GaugeTooltip - Inject this module to use the tooltip feature.

These modules should be injected into the Linear Gauge using the Inject directive.

import { LinearGaugeComponent, Annotations, GaugeTooltip, Inject } from '@syncfusion/ej2-react-lineargauge';
import * as React from 'react';

function App() {
    return (
        <LinearGaugeComponent>
            <Inject services={[Annotations, GaugeTooltip]} />
        </LinearGaugeComponent>
    );
}
export default App;
import { LinearGaugeComponent, Annotations, GaugeTooltip, Inject } from '@syncfusion/ej2-react-lineargauge';
import * as React from 'react';

function App() {
    return (
        <LinearGaugeComponent>
            <Inject services={[Annotations, GaugeTooltip]} />
        </LinearGaugeComponent>
    );
}
export default App;

Run the application

Run the npm run dev command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

The output appears as follows.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';

export function App() {
   return(
    <LinearGaugeComponent>
        <AxesDirective>
            <AxisDirective minimum={0} maximum={200}>
                <PointersDirective>
                    <PointerDirective value={140} color='green'>
                    </PointerDirective>
                </PointersDirective>
            </AxisDirective>
        </AxesDirective>
    </LinearGaugeComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-lineargauge';

export function App() {
   return(
    <LinearGaugeComponent>
        <AxesDirective>
            <AxisDirective minimum={0} maximum={200}>
                <PointersDirective>
                    <PointerDirective value={140} color='green'>
                    </PointerDirective>
                </PointersDirective>
            </AxisDirective>
        </AxesDirective>
    </LinearGaugeComponent>
    );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Troubleshooting

  • Module not found errors: Ensure the @syncfusion/ej2-react-lineargauge package is installed and that your package.json lists it under dependencies.
  • Feature not working (annotation/tooltip): Confirm that the corresponding service (Annotations or GaugeTooltip) is registered through the Inject directive.

See also