Getting Started with React Circular Gauge component

1 Aug 202611 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.

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

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.

Setup for local development

Set up a React application using create-vite, 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 scaffolds your project with JavaScript or TypeScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

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

npm create vite@latest my-app

When prompted, select the following options:

  • Framework: React
  • Variant: JavaScript or TypeScript (your choice)

Initial setup

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

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

Adding Syncfusion® React Circular Gauge packages

All the available Essential® JS 2 packages are published in the npmjs.com public registry. The --save flag instructs npm to add the package to the dependencies section of package.json. To install the Circular Gauge component, use the following command.

npm install @syncfusion/ej2-react-circulargauge

Adding the Circular Gauge component

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 React from 'react';
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';

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

export default App;

A bare <CircularGaugeComponent /> renders an empty frame. To display a visible gauge you must configure at least one axis and one pointer using <AxesDirective>, <AxisDirective>, <PointersDirective>, and <PointerDirective>. The example below shows the minimum configuration needed to render a functional gauge.

import * as React from 'react';
import {
  CircularGaugeComponent, AxesDirective, AxisDirective,
  PointersDirective, PointerDirective
} from '@syncfusion/ej2-react-circulargauge';

export function App() {
  return (
    <CircularGaugeComponent>
      <AxesDirective>
        <AxisDirective minimum={0} maximum={120}>
          <PointersDirective>
            <PointerDirective value={60} />
          </PointersDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

export default App;

The full sample is shown below.

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>

Additional feature modules are available here.

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 { 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 />);

See also