Search results

Getting started with React Circular Gauge component

20 Apr 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.

Copied to clipboard
|-- @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.

Copied to clipboard
npm install -g create-react-app
  • To setup basic React sample use following commands.
Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install
  • Install Syncfusion packages using below command.
Copied to clipboard
npm install @syncfusion/ej2-react-circulargauge --save
  • CircularGauge packages need to be mapped in system.config.js configuration file.
Copied to clipboard
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.
Copied to clipboard
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.

Copied to clipboard
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.

Copied to clipboard
npm start

the below example shows a basic Circular Gauge.

Source
Preview
index.tsx
Copied to clipboard
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
Copied to clipboard
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'));
Copied to clipboard
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'));