React

Search results

Ranges in React Circular Gauge component

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.

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {40} end = {80}></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start={40} end={80}></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>, document.getElementById('circulargauge'));

Customization

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

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} startWidth = {15} endWidth = {15}
            color = '#ff5985'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start={40} end={80} startWidth={15} endWidth={15} color='#ff5985'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>, document.getElementById('circulargauge'));

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,

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '100'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start={40} end={80} radius='100'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>, document.getElementById('circulargauge'));

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.

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '50%'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start={40} end={80} radius='50%'></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>, document.getElementById('circulargauge'));

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.

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective,
RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge' 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>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge' 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>, document.getElementById('circulargauge'));

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.

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
    <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>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
    <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>, document.getElementById('circulargauge'));

Rounded corner radius

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

Source

Preview

index.tsx

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(
  <CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start = {40} end = {80} radius = '50%' roundedCornerRadius = {5}></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>,document.getElementById('circulargauge'));

import * as React from "react";
import * as ReactDOM from "react-dom";
import { CircularGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-circulargauge';
ReactDOM.render(<CircularGaugeComponent id='circulargauge'>
    <AxesDirective>
      <AxisDirective>
        <RangesDirective>
            <RangeDirective start={40} end={80} radius='50%' roundedCornerRadius={5}></RangeDirective>
        </RangesDirective>
      </AxisDirective>
    </AxesDirective>
  </CircularGaugeComponent>, document.getElementById('circulargauge'));

Ranges in React Circular Gauge component

Start and End

Customization

Radius

Dragging range

Multiple Ranges

Rounded corner radius

See also