HelpBot Assistant

How can I help you?

Getting Started with React Circular gauge component

10 Feb 20265 minutes to read

This article describes the steps to create a simple Circular Gauge and demonstrates the component’s basic usage.

Prerequisites: Node.js (recommended v14 or later), npm, and a compatible React version (hooks-enabled React 16.8+).

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

Installation and configuration

To get started with the React application, use create-react-app to set up the project. To install the create-react-app tool globally, run the following command.

npm install -g create-react-app

To create basic React application, run the following command.

create-react-app quickstart

Now, the application is created in the quickstart folder. Run the following command to navigate to the quickstart folder, and install the required npm packages.

cd quickstart

In the quickstart application, the Syncfusion® component is added in the JavaScript file.

Note: For production builds, register the Syncfusion license as required by Syncfusion licensing terms. See the Syncfusion licensing documentation for instructions.

Creating a React application with TypeScript

To create React application with TypeScript, use the following command.

create-react-app quickstart --template typescript

The TypeScript template creates the application in the quickstart folder. Change directory into quickstart before installing additional packages.

cd quickstart

Adding Syncfusion® packages

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

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

Adding 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.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 * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
export function App(){
  return(<CircularGaugeComponent ></CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
export function App(){
  return(<CircularGaugeComponent ></CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Set Pointer Value

You can change the pointer value in the above sample using value property in pointers.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective>
        <PointersDirective>
          <PointerDirective value={35}></PointerDirective>
        </PointersDirective>
      </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, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective>
        <PointersDirective>
          <PointerDirective value={35}></PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);