Gauge axes in React Circular Gauge component

25 Sep 202324 minutes to read

By default, gauge will be displayed with an axis. Each axis contains its own ranges, pointers and annotation.

The video below demonstrates how to add and customize axis in the Circular Gauge component.

Axis Customization

You can customize the width and color of an axis line by using lineStyle property.
Background for an axis can be customized by using background property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective lineStyle = {{
            width: 2,
            color: 'red'
        }} background = 'rgba(0, 128, 128, 0.3)'>
      </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 } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective lineStyle = {{
            width: 2,
            color: 'red'
        }} background = 'rgba(0, 128, 128, 0.3)'>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Angles and Direction

Circular gauge axis can sweep from 0 to 360 degrees. By default start angle of an axis is 200 degree and end angle is 160 degree and you can customize this option by using startAngle and endAngle property.

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

The direction property enables you to render the gauge axis either in ClockWise or in AntiClockWise direction.

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

Axis Radius

By default, radius of an axis is calculated based on the available size. You can customize this, by using radius property. It takes value either in percentage or in pixel.

In Pixel

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

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

In Percentage

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

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

Ticks

You can customize the height, color and width of major ticks and minor ticks by
using majorTicks and minorTicks property.
By default, interval for majorTicks will be calculated automatically and also you can customize the interval for major and minor ticks using interval property.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App () {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{
            interval: 10,
            color:'red',
            height: 10,
            width: 3
        }} minorTicks = {{
            interval: 5,
            color:'green',
            height: 5,
            width: 2
        }}>
      </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 } from '@syncfusion/ej2-react-circulargauge';
export function App () {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{
            interval: 10,
            color:'red',
            height: 10,
            width: 3
        }} minorTicks = {{
            interval: 5,
            color:'green',
            height: 5,
            width: 2
        }}>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Tick Position

Both minor and major ticks can be moved by using offset and
position property. The offset defines the distance between the axis and ticks. By default, offset value is 0.
The position will place the ticks either inside or outside of the axis.

By default, ticks will be placed inside the axis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{
            interval: 10,
            color:'red',
            height: 10,
            width: 3,
            position: 'Inside',
            offset: 5
        }} minorTicks = {{
            interval: 5,
            color:'green',
            height: 5,
            width: 2,
            position: 'Inside',
            offset: 5
        }}>
      </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 } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{
            interval: 10,
            color:'red',
            height: 10,
            width: 3,
            position: 'Inside',
            offset: 5
        }} minorTicks = {{
            interval: 5,
            color:'green',
            height: 5,
            width: 2,
            position: 'Inside',
            offset: 5
        }}>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Labels

Labels of an axis can be customized by using font property in
labelStyle options.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective labelStyle = {{
            font: {
                color: 'red',
                size: '20px',
                fontWeight: 'Bold'
            }
        }}>
      </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 } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective labelStyle = {{
            font: {
                color: 'red',
                size: '20px',
                fontWeight: 'Bold'
            }
        }}>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Label Position

Labels can be moved by using offset or position property.
The offset defines the distance between the labels and ticks.
By default, offset value is 0.
The position will place the labels either inside or outside of the axis. By default, labels will be placed inside the axis.

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

Auto Angle

Labels can be swept along the axis angle by enabling autoAngle property.

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

Smart Labels

When an axis makes a complete circle, then the first and last label of the axis will get overlap with each other.
In this scenario, you can either hide 1st or last label using hiddenLabel property.
When hiddenLabel value is First, then the 1st label will be hidden and when the hiddenLabel value is ‘Last’,
then the last label will be hidden.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
   return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective minimum = {0} maximum = {12} startAngle = {0} endAngle = {360}
        majorTicks = {{
            interval: 1,
            position: 'Inside',
            height: 10
        }} minorTicks = {{
            interval: 0.2,
            position: 'Inside',
            height: 5
        }} labelStyle = {{
            position: 'Inside',
            hiddenLabel: 'First'
        }}>
      </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 } from '@syncfusion/ej2-react-circulargauge';
export function App() {
   return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective minimum = {0} maximum = {12} startAngle = {0} endAngle = {360}
        majorTicks = {{
            interval: 1,
            position: 'Inside',
            height: 10
        }} minorTicks = {{
            interval: 0.2,
            position: 'Inside',
            height: 5
        }} labelStyle = {{
            position: 'Inside',
            hiddenLabel: 'First'
        }}>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Label Format

Axis labels can be formatted by using format property in labelStyle and its supports all globalize format.

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

The following table describes the result of applying some commonly used label formats on numeric values.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Number is rounded to 1 decimal place
1000 n2 1000.00 The Number is rounded to 2 decimal place
1000 n3 1000.000 The Number is rounded to 3 decimal place
0.01 p1 1.0% The Number is converted to percentage with 1 decimal place
0.01 p2 1.00% The Number is converted to percentage with 2 decimal place
0.01 p3 1.000% The Number is converted to percentage with 3 decimal place
1000 c1 $1,000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1,000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

Custom Label Format

Axis labels support custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 20°C.

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

Hide intersecting axis labels

When the axis labels overlap with each other, you can hide the intersected labels by setting the hideIntersectingLabel property to true in the axis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective  minimum = {0} maximum = {200}
                      startAngle = {270} endAngle = {90}
                      hideIntersectingLabel= {true}
                      majorTicks = {{
                          interval: 4
                      }}
                      minorTicks = {{
                            interval: 2
                      }}>
      </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 } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective  minimum = {0} maximum = {200}
                      startAngle = {270} endAngle = {90}
                      hideIntersectingLabel= {true}
                      majorTicks = {{
                          interval: 4
                      }}
                      minorTicks = {{
                            interval: 2
                      }}>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Minimum and Maximum

The minimum and maximum properties enables you to customize the start and end values of an axis.

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

Multiple Axes

In addition to the default axis, you can add n number of axis to a gauge. Each axis will have its own ranges, pointers, annotations and customization options.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{
            interval: 10,
            position: 'Inside',
            height: 10
        }} minorTicks = {{
            interval: 5,
            position: 'Inside',
            height: 5
        }} pointers = {[]}>
      </AxisDirective>
      <AxisDirective majorTicks = {{
             interval: 10,
            position: 'Inside',
            height: 10
        }} minorTicks = {{
            interval: 5,
            position: 'Inside',
            height: 5
        }} pointers = {[]}>
      </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, PointerModel } from '@syncfusion/ej2-react-circulargauge';
export function App() {
  return(
  <CircularGaugeComponent >
    <AxesDirective>
      <AxisDirective majorTicks = {{
            interval: 10,
            position: 'Inside',
            height: 10
        }} minorTicks = {{
            interval: 5,
            position: 'Inside',
            height: 5
        }} pointers = {[] as PointerModel[]}>
      </AxisDirective>
      <AxisDirective majorTicks = {{
             interval: 10,
            position: 'Inside',
            height: 10
        }} minorTicks = {{
            interval: 5,
            position: 'Inside',
            height: 5
        }} pointers = {[] as PointerModel[]}>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);