You can categorize the axis values using start
and end
property in the ranges
. You can add any number of range for an axis by using array of range objects.
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'));
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'));
Ranges can be customized using the following properties.
startWidth
- Specifies start width of the rangeendWidth
- Specifies end width of the rangecolor
- Specifies color of the rangeposition
- Specifies the range bar position. Its possible values are ‘inside’ and ‘outside’Offset
- Specifies offset value from its default positionLinearGaugeRangeBorder
- Specifies range bar border color and width.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'));
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'));
You can add the multiple ranges to highlight the same axis.
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'));
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 support allows to add multiple colors in the ranges and pointers of the linear gauge. The following gradient types are supported in the linear gauge.
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 { 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'));
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'));
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 { 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'));
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'));