React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Ranges in React Linear Gauge component

27 Jul 2021 / 5 minutes to read

Range is the set of values in the axis. The range can be defined using the start and end properties in the RangeDirective. Any number of ranges can be added to the Linear Gauge using the RangesDirective.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';

ReactDOM.render(
    <LinearGaugeComponent id='gauge'>
        <AxesDirective>
            <AxisDirective>
                <RangesDirective>
                    <RangeDirective start={50} end={80}>
                    </RangeDirective>
                </RangesDirective>
            </AxisDirective>
        </AxesDirective>
    </LinearGaugeComponent>,document.getElementById('gauge'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(<LinearGaugeComponent id='gauge'>
        <AxesDirective>
            <AxisDirective>
                <RangesDirective>
                    <RangeDirective start={50} end={80}>
                    </RangeDirective>
                </RangesDirective>
            </AxisDirective>
        </AxesDirective>
    </LinearGaugeComponent>, document.getElementById('gauge'));

Customizing the range

Ranges can be customized using the following properties in RangeDirective.

  • startWidth - To set the thickness of the range at the start axis value.
  • endWidth - To set the thickness of the range at the end axis value.
  • color - To set the color of the range.
  • position - To place the range. By default, the range is placed outside of the axis. To change the position, this property can be set as ”Inside”, ”Outside”, ”Cross”, or ”Auto“.
  • offset - To place the range with the specified distance from the axis.
  • border - To set the color and width for the border of the range.
Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';

ReactDOM.render(
<LinearGaugeComponent id='gauge'>
    <AxesDirective>
        <AxisDirective>
            <RangesDirective>
                <RangeDirective start={50} end={80} statWidth={10} endWidth={20} color='red'>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>,document.getElementById('gauge'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(<LinearGaugeComponent id='gauge'>
    <AxesDirective>
        <AxisDirective>
            <RangesDirective>
                <RangeDirective start={50} end={80} statWidth={10} endWidth={20} color='red'>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>, document.getElementById('gauge'));

Setting the range color for the labels

To set the color of the labels like the range color, set the useRangeColor property as ”true” in the labelStyle.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';

ReactDOM.render(
<LinearGaugeComponent id='gauge'>
    <AxesDirective>
        <AxisDirective labelStyle={{ useRangeColor: true}}>
            <RangesDirective>
                <RangeDirective start={50} end={80} statWidth={10} endWidth={10} color='red'>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>,document.getElementById('gauge'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(<LinearGaugeComponent id='gauge'>
    <AxesDirective>
        <AxisDirective labelStyle={{ useRangeColor: true }}>
            <RangesDirective>
                <RangeDirective start={50} end={80} statWidth={10} endWidth={10} color='red'>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>, document.getElementById('gauge'));

Multiple ranges

Multiple ranges can be added to the Linear Gauge by adding multiple RangeDirective in the RangesDirective class and customization for the ranges can be done with RangeDirective.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';

ReactDOM.render(
<LinearGaugeComponent id='gauge'>
    <AxesDirective>
        <AxisDirective>
            <RangesDirective>
                <RangeDirective start={0} end={30} statWidth={10} endWidth={10} color='#41f47f'>
                </RangeDirective>
                <RangeDirective start={30} end={50} statWidth={10} endWidth={10} color='#f49441'>
                </RangeDirective>
                <RangeDirective start={50} end={100} statWidth={10} endWidth={10} color='#cd41f4'>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>,document.getElementById('gauge'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(<LinearGaugeComponent id='gauge'>
    <AxesDirective>
        <AxisDirective>
            <RangesDirective>
                <RangeDirective start={0} end={30} statWidth={10} endWidth={10} color='#41f47f'>
                </RangeDirective>
                <RangeDirective start={30} end={50} statWidth={10} endWidth={10} color='#f49441'>
                </RangeDirective>
                <RangeDirective start={50} end={100} statWidth={10} endWidth={10} color='#cd41f4'>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>, document.getElementById('gauge'));

Gradient Color

Gradient support allows the addition of multiple colors in the range of the Linear Gauge. The following gradient types are supported in the Linear 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 rendered for the range in the Linear Gauge by using the below example.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, RangesDirective, Gradient, Inject, RangeDirective } from '@syncfusion/ej2-react-lineargauge';

ReactDOM.render(
<LinearGaugeComponent id='gauge' container={{width: 30, offset: 30}} orientation="Horizontal">
<Inject services={[Gradient]}/>
    <AxesDirective>
        <AxisDirective minimum={0} maximum={100} line={{width: 0}} majorTicks={{width: 0, interval:25}}
            minorTicks={{width:  0}} labelStyle={{font: {color: '#424242'}, offset: 70}}>
            <PointersDirective>
                <PointerDirective value={80} height={25} width={35} placement="Near" offset={-44} markerType="Triangle" color= '#f54ea2'>
                </PointerDirective>
            </PointersDirective>
            <RangesDirective>
                <RangeDirective start={0} end={80} startWidth={30} endWidth={30} color="#f54ea2" offset={30}
                    linearGradient = {{
                        startValue: '0%',
                        endValue: '100%',
                        colorStop: [
                        { color: '#fef3f9', offset: '0%', opacity: 1 },
                        { color: '#f54ea2', offset: '100%', opacity: 1 }]
                    }}>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>,document.getElementById('gauge'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, RangesDirective, Gradient, Inject, RangeDirective } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(<LinearGaugeComponent id='gauge' container={{ width: 30, offset: 30 }} orientation="Horizontal">
<Inject services={[Gradient]}/>
    <AxesDirective>
        <AxisDirective minimum={0} maximum={100} line={{ width: 0 }} majorTicks={{ width: 0, interval: 25 }} minorTicks={{ width: 0 }} labelStyle={{ font: { color: '#424242' }, offset: 70 }}>
            <PointersDirective>
                <PointerDirective value={80} height={25} width={35} placement="Near" offset={-44} markerType="Triangle" color='#f54ea2'>
                </PointerDirective>
            </PointersDirective>
            <RangesDirective>
                <RangeDirective start={0} end={80} startWidth={30} endWidth={30} color="#f54ea2" offset={30} linearGradient={{
    startValue: '0%',
    endValue: '100%',
    colorStop: [
        { color: '#fef3f9', offset: '0%', opacity: 1 },
        { color: '#f54ea2', offset: '100%', opacity: 1 }
    ]
}}>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>, document.getElementById('gauge'));

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 rendered for the range in the Linear Gauge by using the below example.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, RangesDirective, Gradient, Inject, RangeDirective } from '@syncfusion/ej2-react-lineargauge';

ReactDOM.render(
<LinearGaugeComponent id='gauge' container={{width: 30, offset: 30}} orientation="Horizontal">
<Inject services={[Gradient]}/>
    <AxesDirective>
        <AxisDirective minimum={0} maximum={100} line={{width: 0}} majorTicks={{width: 0, interval: 25}}
            minorTicks={{width:  0}} labelStyle={{font: {color: '#424242'}, offset: 70}}>
            <PointersDirective>
                <PointerDirective value={80} height={25} width={35} placement="Near" offset={-44} markerType="Triangle" color= '#f54ea2'>
                </PointerDirective>
            </PointersDirective>
            <RangesDirective>
                <RangeDirective start={0} end={80} startWidth={30} endWidth={30} color="#f54ea2" offset={30}
                    radialGradient = {{
                        radius: '65%',
                        outerPosition: { x: '50%', y: '70%' },
                        innerPosition: { x: '60%', y: '60%' },
                        colorStop: [
                        { color: '#fff5f5', offset: '5%', opacity: 0.9 },
                        { color: '#f54ea2', offset: '100%', opacity: 0.9 }]
                    }}>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>,document.getElementById('gauge'));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinearGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, RangesDirective, Gradient, Inject, RangeDirective } from '@syncfusion/ej2-react-lineargauge';
ReactDOM.render(<LinearGaugeComponent id='gauge' container={{ width: 30, offset: 30 }} orientation="Horizontal">
<Inject services={[Gradient]}/>
    <AxesDirective>
        <AxisDirective minimum={0} maximum={100} line={{ width: 0 }} majorTicks={{ width: 0, interval: 25 }} minorTicks={{ width: 0 }} labelStyle={{ font: { color: '#424242' }, offset: 70 }}>
            <PointersDirective>
                <PointerDirective value={80} height={25} width={35} placement="Near" offset={-44} markerType="Triangle" color='#f54ea2'>
                </PointerDirective>
            </PointersDirective>
            <RangesDirective>
                <RangeDirective start={0} end={80} startWidth={30} endWidth={30} color="#f54ea2" offset={30} radialGradient={{
    radius: '65%',
    outerPosition: { x: '50%', y: '70%' },
    innerPosition: { x: '60%', y: '60%' },
    colorStop: [
        { color: '#fff5f5', offset: '5%', opacity: 0.9 },
        { color: '#f54ea2', offset: '100%', opacity: 0.9 }
    ]
}}>
                </RangeDirective>
            </RangesDirective>
        </AxisDirective>
    </AxesDirective>
</LinearGaugeComponent>, document.getElementById('gauge'));

Note: If we set both gradients for the range, only the linear gradient gets rendered. If we set the startValue and endValue of the linearGradient as empty strings, then the radial gradient gets rendered in the range of the Linear Gauge.

Previous
Next