By default, gauge will be displayed with an axis. Each axis contains its own ranges, pointers and annotation.
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective lineStyle = {{
width: 2,
color: 'red'
}} background = 'rgba(0, 128, 128, 0.3)'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective lineStyle={{
width: 2,
color: 'red'
}} background='rgba(0, 128, 128, 0.3)'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective startAngle = {270} endAngle = {90}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective startAngle={270} endAngle={90}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective direction = 'AntiClockWise'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective direction='AntiClockWise'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective radius = '150'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective radius='150'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective radius = '50%'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective radius='50%'>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective majorTicks = {{
interval: 10,
color:'red',
height: 10,
width: 3
}} minorTicks = {{
interval: 5,
color:'green',
height: 5,
width: 2
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective majorTicks={{
interval: 10,
color: 'red',
height: 10,
width: 3
}} minorTicks={{
interval: 5,
color: 'green',
height: 5,
width: 2
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<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>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<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>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle = {{
font: {
color: 'red',
size: '20px',
fontWeight: 'Bold'
}
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle={{
font: {
color: 'red',
size: '20px',
fontWeight: 'Bold'
}
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle = {{
position: 'Outside',
offset: 5
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle={{
position: 'Outside',
offset: 5
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle = {{
autoAngle: true
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle={{
autoAngle: true
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<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>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<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>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle = {{
format: 'p1'
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle={{
format: 'p1'
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle = {{
format: '{value}°C'
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective labelStyle={{
format: '{value}°C'
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective minimum = {0} maximum = {200}
startAngle = {270} endAngle = {90}
hideIntersectingLabel= {true}
majorTicks = {{
interval: 4
}}
minorTicks = {{
interval: 2,
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective minimum={0} maximum={200} startAngle={270} endAngle={90} hideIntersectingLabel={true} majorTicks={{
interval: 4
}} minorTicks={{
interval: 2,
}}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective minimum = {50} maximum = {250}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<AxesDirective>
<AxisDirective minimum={50} maximum={250}>
</AxisDirective>
</AxesDirective>
</CircularGaugeComponent>, document.getElementById('circulargauge'));
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, PointerModel } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
<CircularGaugeComponent id='circulargauge'>
<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>,document.getElementById('circulargauge'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
<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>, document.getElementById('circulargauge'));