Getting Started with React Circular Gauge

10 Aug 20269 minutes to read

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

Ready to streamline your Syncfusion® React development. Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant.

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

The following table lists the minimum required dependencies to use the Circular Gauge.

|-- @syncfusion/ej2-react-circulargauge
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-circulargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-pdf-export

Compatibility: This component is compatible with React 18 and React 19. The latest stable packages are published under the Syncfusion org scope on npm.

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

Adding Syncfusion® React Circular Gauge packages

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

Install the React Circular Gauge package using the following command:

npm install @syncfusion/ej2-react-circulargauge

Add the Circular Gauge Component to the Project

Add the Circular Gauge component to the application. To initialize the Circular Gauge control in the React application, import the component into src/App.tsx or src/App.jsx as appropriate. Use the example below to include the Circular Gauge component.

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

function App() {
  return <CircularGaugeComponent />;
}

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

function App() {
  return <CircularGaugeComponent />;
}

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

Module injection

Circular Gauge component features are segregated into individual feature-wise modules. To use a particular feature, inject its feature module using the Inject directive. The relevant feature module names and descriptions are listed below.

  • Legend - Inject this module to use the legend feature.
  • Annotations - Inject this module to use the annotations feature.
  • GaugeTooltip - Inject this module to use the gauge-specific tooltip feature (distinct from the generic Tooltip).

Inject the required modules into the Circular Gauge using the Inject directive, as shown below.

import { CircularGaugeComponent, Legend, Annotations, GaugeTooltip, Inject } from '@syncfusion/ej2-react-circulargauge';

<CircularGaugeComponent>
  <Inject services={[Legend, Annotations, GaugeTooltip]} />
  {/* axes, pointers, ranges, etc. */}
</CircularGaugeComponent>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, Legend, AxesDirective, AxisDirective, RangesDirective, RangeDirective, Inject } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent  
          legendSettings={{
            visible: true,
            shapeWidth:30,
            shapeHeight:30,
            padding:15,
            border: {
                color:'green',
                width:3
            }
}}>
        <Inject services={[ Legend ]}/>
    <AxesDirective>
      <AxisDirective minimum={0} maximum={100} majorTicks = {{ useRangeColor: true }} minorTicks = {{ useRangeColor: true }} labelStyle = {{ useRangeColor: true }}>
        <RangesDirective>
            <RangeDirective start = {0} end = {25} radius = '108%'></RangeDirective>
            <RangeDirective start = {25} end = {50} radius = '108%'></RangeDirective>
            <RangeDirective start = {50} end = {75} radius = '108%'></RangeDirective>
            <RangeDirective start = {75} end = {100} radius = '108%'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, Legend, AxesDirective, AxisDirective, RangesDirective, RangeDirective, Inject } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent  
          legendSettings={{
            visible: true,
            shapeWidth:30,
            shapeHeight:30,
            padding:15,
            border: {
                color:'green',
                width:3
            }
}}>
        <Inject services={[ Legend ]}/>
    <AxesDirective>
      <AxisDirective minimum={0} maximum={100} majorTicks = {{ useRangeColor: true }} minorTicks = {{ useRangeColor: true }} labelStyle = {{ useRangeColor: true }}>
        <RangesDirective>
            <RangeDirective start = {0} end = {25} radius = '108%'></RangeDirective>
            <RangeDirective start = {25} end = {50} radius = '108%'></RangeDirective>
            <RangeDirective start = {50} end = {75} radius = '108%'></RangeDirective>
            <RangeDirective start = {75} end = {100} radius = '108%'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<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

Troubleshooting

  • Module not found errors: Ensure the @syncfusion/ej2-react-circulargauge 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