Trusted by the world’s leading companies
Overview
The React Linear Gauge is ideal for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. Customize the appearance of the gauge to simulate a thermometer, pressure gauge, ruler, and more.
Orientation
Position the Linear Gauge in vertical or horizontal orientation. This is helpful when viewing the gauge on mobile devices.
Containers
A container holds the ranges and pointers in a Linear Gauge. Customize the container to be shaped as a rectangle, rounded rectangle, or thermometer.
Axes customization
The gauge axes are linear scales where a set of values can be plotted based on any business logic. Users can also easily customize the appearance of the axes.
Label customization
Customize the look and feel of the default labels in the Linear Gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels.
Ticks’ customization
Define the desired style for major ticks and minor ticks in a gauge by changing their height, width, and color.
Offset
To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines.
Axis line
Add a border to the gauge by using axis lines. The appearance of the default axis in the Linear Gauge can also be customized.
Multiple axes
The React Linear Gauge allows users to add multiple axes to a gauge to design it like a thermometer, ruler and more.
Inverse axis
Values in the Linear Gauge axes can be reversed.
Range customization
A range in a React Linear Gauge is a visual element that helps to quickly visualize where a value falls on the axis.
Range position
Change the position of a range or move to any place inside the gauge.
Range width
The range width varies based on the values to enhance usage and readability.
Multiple ranges
Add multiple ranges inside the axes to show color variations.
Pointer types
Indicate the values on an axis using pointers. The React Linear Gauge component supports two types of pointers: marker and bar.
Marker pointer
Point out the current value by using different types of marker pointers.
Pointer type
Change the marker pointer type to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight a value.
Marker pointer position
Change or move the marker pointers to any place inside the gauge.
Text pointer
Change the marker pointer type to text to indicate axis value.
Bar pointer
Use bar pointer to point the current value from the start value of the axes.
Pointer position
Change or move the bar pointers to any place inside the gauge.
Multiple pointers
Add more than one bar pointer to the axes to indicate multiple values.
Pointer animation
The React Linear Gauge provides a visually appealing way to view its pointers with animated transitions for a certain duration. Experience smooth pointer transitions by moving the pointer from one place to another.
Pointer interaction
The interactive React Linear Gauge provides an option to drag the pointer from one place to another. Swipe gestures are used to control the pointer, and the value is changed at runtime.
Tooltips
Display details about the pointer value on a tooltip when hovering over the pointer.
Annotations
Display any HTML element as an annotation at a specific point of interest in the Linear Gauge. Also add multiple annotations to a gauge.
Appearance
The appearance of each element in a Linear Gauge, such as axes, ranges, axes intervals, pointer positions, label positions, tick positions, and more can be customized easily.
Gradient color
Colors applied to the range and pointer can vary gradually to create a smooth color transition.
Gauge title
Add a title to visualize additional information on the Linear Gauge. Users can also customize the font of the title in the gauge.
Width and Height
The Linear Gauge component allows you to change its size by setting the width and height. Also make the gauges to fill its parent container by simply setting the height and width as 100%.
Touch and Browser support
The interactive React Linear Gauge also supports touch interactions.
Touch support
All the features in a Linear Gauge will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization.
Responsive
Users can view the Linear Gauge on various devices. It is also possible to hide specific elements in the gauges for a particular screen sizes by making a very minimal change in the gauge events.
Cross browser support
You can render the Linear Gauge in all modern browsers.
Other supported frameworks
The Linear Gauge component is also available in Blazor, Angular, Vue, and JavaScript frameworks. Check out the different Linear Gauge platforms from the links below,
React Linear Gauge code example
Easily get started with the React Linear Gauge using a few simple lines of TSX code example as demonstrated below. Also explore our React Linear Gauge example that shows you how to render and configure a Linear Gauge in React.
<div className='control-section'>
<LinearGaugeComponent load={load.bind(this)} background='transparent' id='gauge' orientation='Horizontal'>
<Inject services={[Annotations]} />
<AxesDirective>
<AxisDirective minorTicks= majorTicks= labelStyle=>
<PointersDirective>
<PointerDirective value={10} placement='Near' height={15} width={15} offset={-40} markerType='Triangle'>
</PointerDirective>
</PointersDirective>
</AxisDirective>
</AxesDirective>
<AnnotationsDirective>
<AnnotationDirective content='<div style="width: 70px;margin-top: 25%;font-size: 16px;">10 MPH</div>' axisIndex={0}
axisValue={10}
x={10} zIndex='1'
y={-70}>
</AnnotationDirective>
</AnnotationsDirective>
</LinearGaugeComponent>
</div>Not sure how to create your first React Linear Gauge? Our documentation can help.
I’d love to read it nowDiscover Syncfusion’s Complete React Component Ecosystem
Explore over 145+ React UI components featuring established, production-ready controls and the latest pure React components built natively for modern web app development.
-
React Components
-
Pure React Components
-
SMART COMPONENTSGRIDSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONFORMSNOTIFICATIONS
-
GRIDSDATA VISUALIZATIONNAVIGATIONINPUTS
Frequently Asked Questions
Why should you choose Syncfusion React Linear Gauge component?
The Syncfusion React Linear Gauge provides the following:
- Easily visualize the numeric values in linear scale with the features like multiple axes, orientation, and more.
- Customize the appearance of gauges completely to simulate thermometer, pressure gauge, ruler, etc.
- Display Linear Gauge in vertical or horizontal orientation.
- One of the best React Linear Gauge in the market that offers feature-rich UI to interact with the software.
- Support for all modern browsers.
- Simple configuration and APIs.
Expansive learning resources such as demos and documentation to let you get started quickly with the React Linear Gauge component.
Where can I find the Syncfusion React Linear Gauge demo?
You can find our React Linear Gauge demo, which demonstrates how to render and configure the Linear Gauge.
Can I download and utilize the Syncfusion React Linear Gauge for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion React Linear Gauge component?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.
Here are some of their experiences.
Here are some of their experiences.
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress
Oliver O,
Geschäftsführung Kreation/Artdirektion, Small-Business
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V,
CEO, Small-Business
Rated by users across the globe
Syncfusion React Resources
Learning
Documentation
Documentation
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
