Getting started with React Circular Gauge component

22 Jul 2021 / 2 minutes to read

This section explains you the steps required to create a simple circular gauge and demonstrate the basic usage of circular gauge control.

Dependencies

Below is the list of minimum dependencies required to use the circular gauge.

|-- @syncfusion/ej2-react-circulargauge
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-react-buttons
    |-- @syncfusion/ej2-react-popups
    |-- @syncfusion/ej2-circulargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups

Installation and configuration

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

To setup basic React sample use following commands.

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install

Install Syncfusion packages using below command.

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

CircularGauge packages need to be mapped in system.config.js configuration file.

System.config({
paths: {
    'syncfusion:': './node_modules/@syncfusion/',
},
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
    "@syncfusion/ej2-react-circulargauge": "syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js",
    "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
    "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js"
},
packages: {
    'app': { main: 'index', defaultExtension: 'tsx' }
}
});

The project is preconfigured with common settings (src/styles/styles.css, system.config.js ) to start with all Essential JS 2 components.

Run the application

Now run the application in the browser using the below command.

npm start

Now, you can start adding CircularGauge component in the application. For getting started, add the CircularGauge component in src/App.tsx file using following code.

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

class App extends React.Component {
render() {
   return (<CircularGaugeComponent></CircularGaugeComponent>);
  }
}
export default App;

Now run the npm start command in the console, it will run your application and open the browser window.

npm start

the below example shows a basic Circular Gauge.

Source

Preview

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'></CircularGaugeComponent>, document.getElementById('circulargauge'));

Set Pointer Value

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

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
<AxesDirective>
  <AxisDirective>
    <PointersDirective>
      <PointerDirective value={35}></PointerDirective>
    </PointersDirective>
  </AxisDirective>
</AxesDirective>
  </CircularGaugeComponent>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
  <AxisDirective>
    <PointersDirective>
      <PointerDirective value={35}></PointerDirective>
    </PointersDirective>
  </AxisDirective>
</AxesDirective>
  </CircularGaugeComponent>, document.getElementById('circulargauge'));

Contents

Dependencies
Installation and configuration
Run the application
Set Pointer Value

Contents

Dependencies
Installation and configuration
Run the application
Set Pointer Value