Gauge pointers in React Circular gauge component

15 Dec 202424 minutes to read

Pointers are used to indicate values on the axis. Value of the pointer can be modified using the value property.

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 = {90}></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 = {90}></PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Gauge supports 3 types of pointers such as Needle, RangeBar and Marker. You can choose any one of the pointer by using type property.

Needle Pointers

A needle pointer contains three parts, a needle, a cap / knob and a tail. The length of the needle can be customized by using radius property.
The length of the tail can be customized by using lengthproperty.
The radius of the cap can be customized by using radius
in cap object. The needle and tail length takes value either in percentage or pixel.

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 = {90} radius = '50%' cap = {{
                    radius: 10
                }} needleTail = {{
                    length: '25%'
                }}>
            </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 = {90} radius = '50%' cap = {{
                    radius: 10
                }} needleTail = {{
                    length: '25%'
                }}>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Customization

Needle color and width can be customized by using color and pointerWidth property.
Cap and tails can be customized by using cap and needleTail object.

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 = {90} radius = '50%' cap = {{
                radius: 15,
                color: 'white',
                border: {
                    color: '#007DD1',
                    width: 5
                }
            }} needleTail = {{
                length: '22%',
                color: '#007DD1'
            }} color = '#007DD1' pointerWidth = {25}>
            </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 = {90} radius = '50%' cap = {{
                radius: 15,
                color: 'white',
                border: {
                    color: '#007DD1',
                    width: 5
                }
            }} needleTail = {{
                length: '22%',
                color: '#007DD1'
            }} color = '#007DD1' pointerWidth = {25}>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

The appearance of the needle pointer can be customized by using needleStartWidth and needleEndWidth.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective,
Annotations, AnnotationsDirective, AnnotationDirective, Inject } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
   <Inject services={[ Annotations ]}/>
    <AxesDirective>
      <AxisDirective startAngle={270} radius='90%' minimum={0}
        maximum= {100}
        endAngle= {90}
        lineStyle= {{ width:3, color:'#1E7145' }}
        labelStyle={{
            position:'Outside',
            font : {size: '0px', color: '#1E7145'}
        }} majorTicks = {{
            width :1,
            height:0,
            interval:100
        }} minorTicks={{
            height :0,
            width:0
        }}>
        <PointersDirective>
            <PointerDirective value = {70} pointerWidth= {2}
                needleStartWidth= {4}
                needleEndWidth= {4} radius = '80%' color='green' cap = {{
                radius: 8,
                color: 'green',
                border: {
                    color: '#007DD1',
                    width: 5
                },
            }} needleTail = {{
                length: '0%'
            }}>
            </PointerDirective>
        </PointersDirective>
         <AnnotationsDirective>
            <AnnotationDirective angle={180} radius='20%' zIndex='1' content='<div style="color:#757575; font-family:Roboto; font-size:14px;padding-top: 26px">Customized Needle</div>'/>
        </AnnotationsDirective>
      </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,
Annotations, AnnotationsDirective, AnnotationDirective, Inject } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
   <Inject services={[ Annotations ]}/>
    <AxesDirective>
      <AxisDirective startAngle={270} radius='90%' minimum={0}
        maximum= {100}
        endAngle= {90}
        lineStyle= {{ width:3, color:'#1E7145' }}
        labelStyle={{
            position:'Outside',
            font : {size: '0px', color: '#1E7145'}
        }} majorTicks = {{
            width :1,
            height:0,
            interval:100
        }} minorTicks={{
            height :0,
            width:0
        }}>
        <PointersDirective>
            <PointerDirective value = {70} pointerWidth= {2}
                needleStartWidth= {4}
                needleEndWidth= {4} radius = '80%' color='green' cap = {{
                radius: 8,
                color: 'green',
                border: {
                    color: '#007DD1',
                    width: 5
                },
            }} needleTail = {{
                length: '0%'
            }}>
            </PointerDirective>
        </PointersDirective>
         <AnnotationsDirective>
            <AnnotationDirective angle={180} radius='20%' zIndex='1' content='<div style="color:#757575; font-family:Roboto; font-size:14px;padding-top: 26px">Customized Needle</div>'/>
        </AnnotationsDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

RangeBar Pointer

RangeBar pointer is like ranges in an axis, that can be placed on gauge to mark the pointer value. RangeBar starts from the beginning of the gauge and ends at the pointer value.

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 = {50} type = 'RangeBar' radius = '60%'>
            </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 = {50} type = 'RangeBar' radius = '60%'>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Customization

RangeBar can be customized in terms of color, border and thickness by using color, border and pointerWidth property.

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 = {50} type = 'RangeBar' radius = '60%' color = '#007DD1'
                    border = {{
                        color: 'grey',
                        width: 2
                    }} pointerWidth = {15}>
                </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 = {50} type = 'RangeBar' radius = '60%' color = '#007DD1'
                    border = {{
                        color: 'grey',
                        width: 2
                    }} pointerWidth = {15}>
                </PointerDirective>
            </PointersDirective>
          </AxisDirective>
        </AxesDirective>
      </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Rounded corner for range bar pointer

The start and end pointers of range bar in the circular gauge are rounded to form arc gauges.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
    return(
      <CircularGaugeComponent >
        <AxesDirective>
          <AxisDirective lineStyle={{ color: 'transparent' }}>
            <RangesDirective>
                <RangeDirective start = {0} end = {50} radius = '108%' roundedCornerRadius = {6}></RangeDirective>
                <RangeDirective start = {50} end = {100} radius = '108%'  roundedCornerRadius = {6}></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, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
    return(
      <CircularGaugeComponent >
        <AxesDirective>
          <AxisDirective lineStyle={{ color: 'transparent' }}>
            <RangesDirective>
                <RangeDirective start = {0} end = {50} radius = '108%' roundedCornerRadius = {6}></RangeDirective>
                <RangeDirective start = {50} end = {100} radius = '108%'  roundedCornerRadius = {6}></RangeDirective>
            </RangesDirective>
          </AxisDirective>
        </AxesDirective>
      </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Marker Pointer

Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using markerShape property in pointer. Gauge marker supports Circle, Rectangle, Triangle, InvertedTriangle and Diamond shape.

We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting markerShape to Image and assigning  image path to imageUrl in pointer.

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 = {90} type = 'Marker' markerShape = 'InvertedTriangle'
                radius = '100%' markerHeight = {15} markerWidth = {15}>
            </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 = {90} type = 'Marker' markerShape = 'InvertedTriangle'
                radius = '100%' markerHeight = {15} markerWidth = {15}>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Customization

The marker can be customized in terms of color, border, width and height by using color, border, markerWidth and markerHeight property in pointer.

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 = {90} type = 'Marker' markerShape = 'Triangle' radius = '100%'
                color = 'white' border= {{
                color: '#007DD1',
                width: 2
            }} markerHeight = {15} markerWidth = {15}>
            </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 = {90} type = 'Marker' markerShape = 'Triangle' radius = '100%'
                color = 'white' border= {{
                color: '#007DD1',
                width: 2
            }} markerHeight = {15} markerWidth = {15}>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Dragging pointer

The pointers can be dragged along the axis line by clicking and dragging them. To enable or disable the drag functionality for all pointers across all axes, use the enablePointerDrag property. When this property is set to true, all pointers can be dynamically adjusted by dragging. Setting it to false keeps all pointers fixed in their specified positions.

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  enablePointerDrag={true} height='250px' width='250px'>
    <AxesDirective>
      <AxisDirective>
        <PointersDirective>
            <PointerDirective value = {50}></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  enablePointerDrag={true} height='250px' width='250px'>
    <AxesDirective>
      <AxisDirective>
        <PointersDirective>
            <PointerDirective value = {50}></PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Enabling drag functionality for a specific pointer

To enable or disable the drag functionality for specific pointers along the axis line, use the enableDrag property in the required pointer model.

When the enableDrag property is enabled for any individual pointer model, the enablePointerDrag property becomes ineffective.

The following example demonstrates how to enable the drag functionality for multiple pointers individually.

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 enableDrag={false} value = {90} type = 'Marker' markerShape = 'InvertedTriangle'
                radius = '100%' markerHeight = {15} markerWidth = {15}>
            </PointerDirective>
            <PointerDirective enableDrag={true} value = {90} type = 'RangeBar' radius = '60%' pointerWidth = {10}>
            </PointerDirective>
            <PointerDirective enableDrag={true} value = {90} radius = '60%' pointerWidth = {25} cap = {{
                radius: 15,
                border: {
                    width: 5
                }
            }} needleTail = {{
                length: '22%'
            }}>
            </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 enableDrag={false} value = {90} type = 'Marker' markerShape = 'InvertedTriangle'
                radius = '100%' markerHeight = {15} markerWidth = {15}>
            </PointerDirective>
            <PointerDirective enableDrag={true} value = {90} type = 'RangeBar' radius = '60%' pointerWidth = {10}>
            </PointerDirective>
            <PointerDirective enableDrag={true} value = {90} radius = '60%' pointerWidth = {25} cap = {{
                radius: 15,
                border: {
                    width: 5
                }
            }} needleTail = {{
                length: '22%'
            }}>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Multiple Pointers

In addition to the default pointer, you can add n number of pointer to an axis by using pointers property.

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 = {90} type = 'Marker' markerShape = 'InvertedTriangle'
                radius = '100%' markerHeight = {15} markerWidth = {15}>
            </PointerDirective>
            <PointerDirective value = {90} type = 'RangeBar' radius = '60%' pointerWidth = {10}>
            </PointerDirective>
            <PointerDirective value = {90} radius = '60%' pointerWidth = {25} cap = {{
                radius: 15,
                border: {
                    width: 5
                }
            }} needleTail = {{
                length: '22%'
            }}>
            </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 = {90} type = 'Marker' markerShape = 'InvertedTriangle'
                radius = '100%' markerHeight = {15} markerWidth = {15}>
            </PointerDirective>
            <PointerDirective value = {90} type = 'RangeBar' radius = '60%' pointerWidth = {10}>
            </PointerDirective>
            <PointerDirective value = {90} radius = '60%' pointerWidth = {25} cap = {{
                radius: 15,
                border: {
                    width: 5
                }
            }} needleTail = {{
                length: '22%'
            }}>
            </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Animation

Pointer will get animate on loading the gauge, this can be handled by using animation property in pointer.
The enable property in animation allows you to enable or disable the animation.
The duration property specify the duration of the animation in milliseconds.

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 = {90} animation= {{
                enable: true,
                duration: 1500
            }}></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 = {90} animation= {{
                enable: true,
                duration: 1500
            }}></PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Gradient Color

Gradient support allows to add multiple colors in the ranges and pointers of the circular gauge. The following gradient types are supported in the circular gauge.

  • Linear Gradient
  • Radial Gradient

Linear Gradient

Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the startValue property. The end value of the linear gradient will be set using the endValue property. The color stop values such as color, opacity and offset are set using colorStop property.

The linear gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, Gradient, Inject } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
   <Inject services={[ Gradient ]}/>
    <AxesDirective>
      <AxisDirective radius='90%' startAngle={270} endAngle={90} minimum={0} maximum={100} lineStyle={{ width: 3, color: '#E63B86'}} labelStyle={{ font: { size: '0px'}}} majorTicks={{ height: 0 }} minorTicks={{ height: 0}}>
        <PointersDirective>
            <PointerDirective value = {80} animation= {{ enable: true, duration: 1000 }} radius='80%' markerHeight={5} markerWidth={5} pointerWidth={10} linearGradient = {{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                linearGradient: {
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
                }
            }}></PointerDirective>
            <PointerDirective value = {40} animation= {{ enable: true, duration: 1000 }} radius='60%' markerHeight={5} markerWidth={5} pointerWidth={10} linearGradient = {{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                linearGradient: {
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
                }}}>
          </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, Gradient, Inject } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
   <Inject services={[ Gradient ]}/>
    <AxesDirective>
      <AxisDirective radius='90%' startAngle={270} endAngle={90} minimum={0} maximum={100} lineStyle={{ width: 3, color: '#E63B86'}} labelStyle={{ font: { size: '0px'}}} majorTicks={{ height: 0 }} minorTicks={{ height: 0}}>
        <PointersDirective>
            <PointerDirective value = {80} animation= {{ enable: true, duration: 1000 }} radius='80%' markerHeight={5} markerWidth={5} pointerWidth={10} linearGradient = {{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                linearGradient: {
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
                }
            }}></PointerDirective>
            <PointerDirective value = {40} animation= {{ enable: true, duration: 1000 }} radius='60%' markerHeight={5} markerWidth={5} pointerWidth={10} linearGradient = {{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                linearGradient: {
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '70%', opacity: 0.9 }]
                }}}>
          </PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Radial Gradient

Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the innerPosition property. The outer circle position of the radial gradient can be set using the outerPosition property. The color stop values such as color, opacity and offset are set using colorStop property.

The radial gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, Inject, Gradient } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
   <Inject services={[ Gradient ]}/>
    <AxesDirective>
      <AxisDirective radius='90%' startAngle={270} endAngle={90} minimum={0} maximum={100} lineStyle={{ width: 3, color: '#E63B86'}} labelStyle={{ font: { size: '0px'}}} majorTicks={{ height: 0 }} minorTicks={{ height: 0}}>
        <PointersDirective>
            <PointerDirective value = {80} animation= {{ enable: true, duration: 1000 }} radius='80%' markerHeight={5} markerWidth={5} pointerWidth={10} radialGradient = {{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                radialGradient: {
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
                }
            }}></PointerDirective>
            <PointerDirective value = {40} animation= {{ enable: true, duration: 1000 }} radius='60%' markerHeight={5} markerWidth={5} pointerWidth={10} radialGradient = {{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                radialGradient: {
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
                }
            }}></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, Inject, Gradient } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
   <Inject services={[ Gradient ]}/>
    <AxesDirective>
      <AxisDirective radius='90%' startAngle={270} endAngle={90} minimum={0} maximum={100} lineStyle={{ width: 3, color: '#E63B86'}} labelStyle={{ font: { size: '0px'}}} majorTicks={{ height: 0 }} minorTicks={{ height: 0}}>
        <PointersDirective>
            <PointerDirective value = {80} animation= {{ enable: true, duration: 1000 }} radius='80%' markerHeight={5} markerWidth={5} pointerWidth={10} radialGradient = {{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                radialGradient: {
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
                }
            }}></PointerDirective>
            <PointerDirective value = {40} animation= {{ enable: true, duration: 1000 }} radius='60%' markerHeight={5} markerWidth={5} pointerWidth={10} radialGradient = {{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
            }} cap={{
                radius: 8,
                color: 'white',
                border: {
                    color: '#E63B86',
                    width: 1
                }
            }} needleTail={{
                length: '20%',
                radialGradient: {
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                { color: '#FEF3F9', offset: '0%', opacity: 0.9 },
                { color: '#E63B86', offset: '60%', opacity: 0.9 }]
                }
            }}></PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);