Gauge ranges in React Circular gauge component

3 Mar 202324 minutes to read

You can categories certain interval on gauge axis using ranges property.

Start and End

Start and end value of a range in an axis can be customized by using start and end properties.

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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80}></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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80}></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Customization

Color and thickness of the range can be customized by using color,
startWidth and endWidth property.

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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} startWidth = {15} endWidth = {15}
            color = '#ff5985'></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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} startWidth = {15} endWidth = {15}
            color = '#ff5985'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Radius

You can place the range inside or outside of the axis by using radius property. The radius of the range can takes value either in percentage or in pixels. By default, ranges take 100% of the axis radius.

In Pixel

You can set the radius of the range in pixel as demonstrated below,

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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '100'></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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '100'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

In Percentage

By setting value in percentage, range gets its dimension with respect to its axis radius. For example, when the radius is ‘50%’, range renders to half of the axis radius.

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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '50%'></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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '50%'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Dragging range

The ranges can be dragged on the axis values by clicking and dragging the same. To enable or disable the range drag, use the enableRangeDrag property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective,
RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent  enableRangeDrag={true} height='250px' width='250px'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {0} end = {100} startWidth={8} endWidth={8} radius='108%' color='#30B32D'></RangeDirective>
        </RangesDirective>
        <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,
RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent  enableRangeDrag={true} height='250px' width='250px'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {0} end = {100} startWidth={8} endWidth={8} radius='108%' color='#30B32D'></RangeDirective>
        </RangesDirective>
        <PointersDirective>
            <PointerDirective value = {50}></PointerDirective>
        </PointersDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Multiple Ranges

You can add multiple ranges to an axis with the above customization as demonstrated below.

Note: You can set the range color to axis ticks and labels by enabling useRangeColor property in majorTicks, minorTicks and labelStyle object.

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 majorTicks = {{ useRangeColor: true }} minorTicks = {{ useRangeColor: true }} labelStyle = {{ useRangeColor: true }}>
        <RangesDirective>
            <RangeDirective start = {0} end = {25} radius = '108%'></RangeDirective>
            <RangeDirective start = {25} end = {50} radius = '70%'></RangeDirective>
            <RangeDirective start = {50} end = {75} radius = '70%'></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, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{ useRangeColor: true }} minorTicks = {{ useRangeColor: true }} labelStyle = {{ useRangeColor: true }}>
        <RangesDirective>
            <RangeDirective start = {0} end = {25} radius = '108%'></RangeDirective>
            <RangeDirective start = {25} end = {50} radius = '70%'></RangeDirective>
            <RangeDirective start = {50} end = {75} radius = '70%'></RangeDirective>
            <RangeDirective start = {75} end = {100} radius = '108%'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Rounded corner radius

You can customize the corner radius using the roundedCornerRadius property in ranges.

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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '50%' roundedCornerRadius = {5}></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>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '50%' roundedCornerRadius = {5}></RangeDirective>
        </RangesDirective>
      </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.

To apply linear gradient to the range, follow the below code sample.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  CircularGaugeComponent,
  AxesDirective,
  AxisDirective,
  RangesDirective,
  RangeDirective,
  Annotations,
  Inject,
  Gradient,
  PointerDirective,
  PointersDirective,
  AnnotationsDirective,
  AnnotationDirective,
} from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return (
    <CircularGaugeComponent
      title="Shot Put Distance"
      titleStyle={{ size: '18px' }}
      centerY="57%'"
    >
      <Inject services={[Annotations, Gradient]} />
      <AxesDirective>
        <AxisDirective
          startAngle={200}
          endAngle={130}
          radius="90%"
          minimum={0}
          maximum={14}
          lineStyle={{
            width: 0,
            color: '#1d1d1d',
          }}
          majorTicks={{ width: 0 }}
          minorTicks={{ width: 0 }}
          labelStyle={{ font: { size: '0px' } }}
        >
          <PointersDirective>
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/football.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={11}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/basketball.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1200 }}
            />
            <PointerDirective
              type="Marker"
              value={10}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/golfball.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 900 }}
            />
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/Athletics.png"
              radius="0%"
              markerWidth={90}
              markerHeight={90}
              animation={{ duration: 0 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/girl.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-one.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-two.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
          </PointersDirective>
          <RangesDirective>
            <RangeDirective
              start={0}
              end={12}
              radius="115%"
              color="#01aebe"
              startWidth={25}
              endWidth={25}
              linearGradient={{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                  { color: '#9E40DC', offset: '0%', opacity: 0.9 },
                  { color: '#E63B86', offset: '70%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={11}
              radius="85%"
              color="#3bceac"
              startWidth={25}
              endWidth={25}
              linearGradient={{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                  { color: '#9E40DC', offset: '0%', opacity: 0.9 },
                  { color: '#E63B86', offset: '70%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={10}
              radius="55%"
              color="#ee4266"
              startWidth={25}
              endWidth={25}
              linearGradient={{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                  { color: '#9E40DC', offset: '0%', opacity: 0.9 },
                  { color: '#E63B86', offset: '70%', opacity: 0.9 }
                ]
              }}
            />
          </RangesDirective>
          <AnnotationsDirective>
            <AnnotationDirective
              content="12 M"
              radius="108%"
              angle={98}
              zIndex="1"
            />
            <AnnotationDirective
              content="11 M"
              radius="80%"
              angle={81}
              zIndex="1"
            />
            <AnnotationDirective
              content="10 M"
              radius="50%"
              angle={69}
              zIndex="1"
            />
            <AnnotationDirective
              content="Doe"
              radius="108%"
              angle={190}
              zIndex="1"
            />
            <AnnotationDirective
              content="Almaida"
              radius="80%"
              angle={185}
              zIndex="1"
            />
            <AnnotationDirective
              content="John"
              radius="50%"
              angle={180}
              zIndex="1"
            />
          </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,
  RangesDirective,
  RangeDirective,
  Annotations,
  Inject,
  Gradient,
  PointerDirective,
  PointersDirective,
  AnnotationsDirective,
  AnnotationDirective,
} from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return (
    <CircularGaugeComponent
      title="Shot Put Distance"
      titleStyle={{ size: '18px' }}
      centerY="57%'"
    >
      <Inject services={[Annotations, Gradient]} />
      <AxesDirective>
        <AxisDirective
          startAngle={200}
          endAngle={130}
          radius="90%"
          minimum={0}
          maximum={14}
          lineStyle={{
            width: 0,
            color: '#1d1d1d',
          }}
          majorTicks={{ width: 0 }}
          minorTicks={{ width: 0 }}
          labelStyle={{ font: { size: '0px' } }}
        >
          <PointersDirective>
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/football.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={11}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/basketball.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1200 }}
            />
            <PointerDirective
              type="Marker"
              value={10}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/golfball.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 900 }}
            />
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/Athletics.png"
              radius="0%"
              markerWidth={90}
              markerHeight={90}
              animation={{ duration: 0 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/girl.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-one.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-two.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
          </PointersDirective>
          <RangesDirective>
            <RangeDirective
              start={0}
              end={12}
              radius="115%"
              color="#01aebe"
              startWidth={25}
              endWidth={25}
              linearGradient={{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                  { color: '#9E40DC', offset: '0%', opacity: 0.9 },
                  { color: '#E63B86', offset: '70%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={11}
              radius="85%"
              color="#3bceac"
              startWidth={25}
              endWidth={25}
              linearGradient={{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                  { color: '#9E40DC', offset: '0%', opacity: 0.9 },
                  { color: '#E63B86', offset: '70%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={10}
              radius="55%"
              color="#ee4266"
              startWidth={25}
              endWidth={25}
              linearGradient={{
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                  { color: '#9E40DC', offset: '0%', opacity: 0.9 },
                  { color: '#E63B86', offset: '70%', opacity: 0.9 }
                ]
              }}
            />
          </RangesDirective>
          <AnnotationsDirective>
            <AnnotationDirective
              content="12 M"
              radius="108%"
              angle={98}
              zIndex="1"
            />
            <AnnotationDirective
              content="11 M"
              radius="80%"
              angle={81}
              zIndex="1"
            />
            <AnnotationDirective
              content="10 M"
              radius="50%"
              angle={69}
              zIndex="1"
            />
            <AnnotationDirective
              content="Doe"
              radius="108%"
              angle={190}
              zIndex="1"
            />
            <AnnotationDirective
              content="Almaida"
              radius="80%"
              angle={185}
              zIndex="1"
            />
            <AnnotationDirective
              content="John"
              radius="50%"
              angle={180}
              zIndex="1"
            />
          </AnnotationsDirective>
        </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.

To apply radial gradient to the range, follow the below code sample.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  CircularGaugeComponent,
  AxesDirective,
  AxisDirective,
  RangesDirective,
  RangeDirective,
  Annotations,
  Inject,
  Gradient,
  PointerDirective,
  PointersDirective,
  AnnotationsDirective,
  AnnotationDirective,
} from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return (
    <CircularGaugeComponent
      title="Shot Put Distance"
      titleStyle={{ size: '18px' }}
      centerY="57%'"
    >
      <Inject services={[Annotations, Gradient]} />
      <AxesDirective>
        <AxisDirective
          startAngle={200}
          endAngle={130}
          radius="90%"
          minimum={0}
          maximum={14}
          lineStyle={{
            width: 0,
            color: '#1d1d1d'
          }}
          majorTicks={{ width: 0 }}
          minorTicks={{ width: 0 }}
          labelStyle={{ font: { size: '0px' } }}
        >
          <PointersDirective>
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/football.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={11}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/basketball.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1200 }}
            />
            <PointerDirective
              type="Marker"
              value={10}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/golfball.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 900 }}
            />
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/Athletics.png"
              radius="0%"
              markerWidth={90}
              markerHeight={90}
              animation={{ duration: 0 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/girl.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-one.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-two.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
          </PointersDirective>
          <RangesDirective>
            <RangeDirective
              start={0}
              end={12}
              radius="115%"
              color="#01aebe"
              startWidth={25}
              endWidth={25}
              radialGradient={{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                  { color: '#9E40DC', offset: '90%', opacity: 0.9 },
                  { color: '#E63B86', offset: '160%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={11}
              radius="85%"
              color="#3bceac"
              startWidth={25}
              endWidth={25}
              radialGradient={{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                  { color: '#9E40DC', offset: '90%', opacity: 0.9 },
                  { color: '#E63B86', offset: '160%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={10}
              radius="55%"
              color="#ee4266"
              startWidth={25}
              endWidth={25}
              radialGradient={{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                  { color: '#9E40DC', offset: '90%', opacity: 0.9 },
                  { color: '#E63B86', offset: '160%', opacity: 0.9 }
                ]
              }}
            />
          </RangesDirective>
          <AnnotationsDirective>
            <AnnotationDirective
              content="12 M"
              radius="108%"
              angle={98}
              zIndex="1"
            />
            <AnnotationDirective
              content="11 M"
              radius="80%"
              angle={81}
              zIndex="1"
            />
            <AnnotationDirective
              content="10 M"
              radius="50%"
              angle={69}
              zIndex="1"
            />
            <AnnotationDirective
              content="Doe"
              radius="108%"
              angle={190}
              zIndex="1"
            />
            <AnnotationDirective
              content="Almaida"
              radius="80%"
              angle={185}
              zIndex="1"
            />
            <AnnotationDirective
              content="John"
              radius="50%"
              angle={180}
              zIndex="1"
            />
          </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,
  RangesDirective,
  RangeDirective,
  Annotations,
  Inject,
  Gradient,
  PointerDirective,
  PointersDirective,
  AnnotationsDirective,
  AnnotationDirective,
} from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return (
    <CircularGaugeComponent
      title="Shot Put Distance"
      titleStyle={{ size: '18px' }}
      centerY="57%'"
    >
      <Inject services={[Annotations, Gradient]} />
      <AxesDirective>
        <AxisDirective
          startAngle={200}
          endAngle={130}
          radius="90%"
          minimum={0}
          maximum={14}
          lineStyle={{
            width: 0,
            color: '#1d1d1d'
          }}
          majorTicks={{ width: 0 }}
          minorTicks={{ width: 0 }}
          labelStyle={{ font: { size: '0px' } }}
        >
          <PointersDirective>
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/football.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={11}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/basketball.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1200 }}
            />
            <PointerDirective
              type="Marker"
              value={10}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/golfball.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 900 }}
            />
            <PointerDirective
              type="Marker"
              value={12}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/Athletics.png"
              radius="0%"
              markerWidth={90}
              markerHeight={90}
              animation={{ duration: 0 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/girl.png"
              radius="108%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-one.png"
              radius="78%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
            <PointerDirective
              type="Marker"
              value={0.1}
              markerShape="Image"
              imageUrl="https://ej2.syncfusion.com/react/demos/src/circular-gauge/images/man-two.png"
              radius="48%"
              markerWidth={28}
              markerHeight={28}
              animation={{ duration: 1500 }}
            />
          </PointersDirective>
          <RangesDirective>
            <RangeDirective
              start={0}
              end={12}
              radius="115%"
              color="#01aebe"
              startWidth={25}
              endWidth={25}
              radialGradient={{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                  { color: '#9E40DC', offset: '90%', opacity: 0.9 },
                  { color: '#E63B86', offset: '160%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={11}
              radius="85%"
              color="#3bceac"
              startWidth={25}
              endWidth={25}
              radialGradient={{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                  { color: '#9E40DC', offset: '90%', opacity: 0.9 },
                  { color: '#E63B86', offset: '160%', opacity: 0.9 }
                ]
              }}
            />
            <RangeDirective
              start={0}
              end={10}
              radius="55%"
              color="#ee4266"
              startWidth={25}
              endWidth={25}
              radialGradient={{
                radius: '50%',
                innerPosition: { x: '50%', y: '50%' },
                outerPosition: { x: '50%', y: '50%' },
                colorStop: [
                  { color: '#9E40DC', offset: '90%', opacity: 0.9 },
                  { color: '#E63B86', offset: '160%', opacity: 0.9 }
                ]
              }}
            />
          </RangesDirective>
          <AnnotationsDirective>
            <AnnotationDirective
              content="12 M"
              radius="108%"
              angle={98}
              zIndex="1"
            />
            <AnnotationDirective
              content="11 M"
              radius="80%"
              angle={81}
              zIndex="1"
            />
            <AnnotationDirective
              content="10 M"
              radius="50%"
              angle={69}
              zIndex="1"
            />
            <AnnotationDirective
              content="Doe"
              radius="108%"
              angle={190}
              zIndex="1"
            />
            <AnnotationDirective
              content="Almaida"
              radius="80%"
              angle={185}
              zIndex="1"
            />
            <AnnotationDirective
              content="John"
              radius="50%"
              angle={180}
              zIndex="1"
            />
          </AnnotationsDirective>
        </AxisDirective>
      </AxesDirective>
    </CircularGaugeComponent>
  );
}

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

See also