HelpBot Assistant

How can I help you?

Getting Started with React Circular gauge component

4 Mar 202623 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.

Dependencies

Following is the list of minimum dependencies required 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-paf-export

Setup for local development

Easily set up a React application using 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 your environment using JavaScript 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

This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.

Initial_setup

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

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

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

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

Adding Syncfusion® React Circular Gauge packages

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

npm install @syncfusion/ej2-react-circulargauge --save

The –save will instruct NPM to include the Circular Gauge package inside of the dependencies section of the package.json.

Adding 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.js or src/App.tsx 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;

Run the application

The Circular Gauge control is now included in the quickstart application. Use the following command to run the application.

npm start

The below example shows the basic Circular Gauge.

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 current application uses the Legend, Tooltip, and Annotation features of the Circular Gauge. The relevant feature module names and descriptions are listed below.

  • Legend - Inject this module to use legend feature.
  • Tooltip - Inject this module to use tooltip feature.
  • Annotations - Inject this module to use annotations feature.
  • GaugeTooltip - Inject this module to use gauge tooltip feature.

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

Additional feature modules are available here.

Set pointer value

You can change the pointer value in the above sample using the value property in pointers. The pointer indicates the current value on the gauge scale.

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

function App() {
  return (
    <CircularGaugeComponent>
      <AxesDirective>
        <AxisDirective>
          <PointersDirective>
            <PointerDirective value={35} />
          </PointersDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

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

function App() {
  return (
    <CircularGaugeComponent>
      <AxesDirective>
        <AxisDirective>
          <PointersDirective>
            <PointerDirective value={35} />
          </PointersDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

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

Adding ranges

Ranges are used to categorize the axis values into different sections with distinct colors. Add ranges to the gauge by configuring the ranges property. Each range can have a start value, end value, and color to visually represent different sections of the gauge.

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

function App() {
  return (
    <CircularGaugeComponent>
      <AxesDirective>
        <AxisDirective>
          <RangesDirective>
            <RangeDirective start={40} end={80} />
          </RangesDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

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

function App() {
  return (
    <CircularGaugeComponent>
      <AxesDirective>
        <AxisDirective>
          <RangesDirective>
            <RangeDirective start={40} end={80} />
          </RangesDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

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

Adding annotations

Annotations provide the ability to add custom HTML content at specific locations within the gauge. Enable annotations by injecting the Annotations module and using the annotations property. Annotations are useful for displaying additional information, labels, or custom content on the gauge.

import * as React from "react";
import { createRoot } from "react-dom/client";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, Inject, Annotations, AnnotationsDirective, AnnotationDirective } from '@syncfusion/ej2-react-circulargauge';

function App() {
  return (
    <CircularGaugeComponent>
      <Inject services={[Annotations]} />
      <AxesDirective>
        <AxisDirective>
          <PointersDirective>
            <PointerDirective value={50} />
          </PointersDirective>
          <AnnotationsDirective>
            <AnnotationDirective content='<div><div><span>Pointer Value : 50</span></div></div>' zIndex='1' />
          </AnnotationsDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

const root = createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import { createRoot } from "react-dom/client";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, Inject, Annotations, AnnotationsDirective, AnnotationDirective } from '@syncfusion/ej2-react-circulargauge';

function App() {
  return (
    <CircularGaugeComponent>
      <Inject services={[Annotations]} />
      <AxesDirective>
        <AxisDirective>
          <PointersDirective>
            <PointerDirective value={50} />
          </PointersDirective>
          <AnnotationsDirective>
            <AnnotationDirective content='<div><div><span>Pointer Value : 50</span></div></div>' zIndex='1' />
          </AnnotationsDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

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

Adding legend

Legends provide information about the ranges displayed in the circular gauge. Enable legends by setting the visible property to true in legendSettings and injecting the Legend module. Without the Legend module, the legend will not render.

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

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

Refer to the React Circular Gauge feature tour page for its groundbreaking feature representations. You can also explore our React Circular Gauge Component example that shows how to render the Circular Gauge in React.

See also