DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Gauges - Overview

DevExtreme React Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges.

This demo displays a simple dashboard with customized gauges.

Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.

Learn more about DevExtreme React components.

Backend API
import React, { useCallback, useState } from 'react'; import CircularGauge, { Geometry, Scale as CircularScale, Size as CircularSize, ValueIndicator as CircularValueIndicator, } from 'devextreme-react/circular-gauge'; import LinearGauge, { Label, MinorTick, Scale as LinearScale, Size as LinearSize, ValueIndicator as LinearValueIndicator, } from 'devextreme-react/linear-gauge'; import Slider from 'devextreme-react/slider'; import Indicator from './Indicator.tsx'; const color = '#f05b41'; function CenterTemplate(gauge) { return ( <svg> <circle cx="100" cy="100" r="55" strokeWidth="2" stroke={color} fill="transparent"></circle> <text textAnchor="middle" alignmentBaseline="middle" y="100" x="100" fontSize="50" fontWeight="lighter" fill={color}>{gauge.value()}</text> </svg> ); } function App() { const [speedValue, setSpeedValue] = useState(40); const handleSpeedChange = useCallback(({ value }) => { setSpeedValue(value); }, [setSpeedValue]); return ( <div id="gauge-demo"> <div id="gauge-container"> <div className="left-section"> <Indicator value={speedValue / 2} inverted={false} startAngle={180} endAngle={90} color={color} /> <Indicator value={speedValue / 2} inverted={true} startAngle={-90} endAngle={-180} color={color} /> </div> &nbsp; <div className="center-section"> <CircularGauge value={speedValue} centerRender={CenterTemplate}> <CircularSize width={260} /> <CircularScale startValue={20} endValue={200} tickInterval={20} minorTickInterval={10} /> <Geometry startAngle={225} endAngle={315} /> <CircularValueIndicator indentFromCenter={55} color={color} spindleSize={0} spindleGapSize={0} /> </CircularGauge> <LinearGauge value={50 - speedValue * 0.24} id="fuel-gauge"> <LinearSize width={90} height={20} /> <LinearScale startValue={0} endValue={50} tickInterval={25} minorTickInterval={12.5} > <MinorTick visible={true} /> <Label visible={false} /> </LinearScale> <LinearValueIndicator size={8} offset={7} color={color} /> </LinearGauge> </div> &nbsp; <div className="right-section"> <Indicator value={speedValue / 2} inverted={true} startAngle={90} endAngle={0} color={color} /> <Indicator value={speedValue / 2} inverted={false} startAngle={0} endAngle={-90} color={color} /> </div> </div> <Slider value={speedValue} onValueChanged={handleSpeedChange} width={155} min={0} max={200} id="slider" /> </div> ); } export default App;
import React, { useCallback, useState } from 'react'; import CircularGauge, { Geometry, Scale as CircularScale, Size as CircularSize, ValueIndicator as CircularValueIndicator, } from 'devextreme-react/circular-gauge'; import LinearGauge, { Label, MinorTick, Scale as LinearScale, Size as LinearSize, ValueIndicator as LinearValueIndicator, } from 'devextreme-react/linear-gauge'; import Slider from 'devextreme-react/slider'; import Indicator from './Indicator.js'; const color = '#f05b41'; function CenterTemplate(gauge) { return ( <svg> <circle cx="100" cy="100" r="55" strokeWidth="2" stroke={color} fill="transparent" ></circle> <text textAnchor="middle" alignmentBaseline="middle" y="100" x="100" fontSize="50" fontWeight="lighter" fill={color} > {gauge.value()} </text> </svg> ); } function App() { const [speedValue, setSpeedValue] = useState(40); const handleSpeedChange = useCallback( ({ value }) => { setSpeedValue(value); }, [setSpeedValue], ); return ( <div id="gauge-demo"> <div id="gauge-container"> <div className="left-section"> <Indicator value={speedValue / 2} inverted={false} startAngle={180} endAngle={90} color={color} /> <Indicator value={speedValue / 2} inverted={true} startAngle={-90} endAngle={-180} color={color} /> </div> &nbsp; <div className="center-section"> <CircularGauge value={speedValue} centerRender={CenterTemplate} > <CircularSize width={260} /> <CircularScale startValue={20} endValue={200} tickInterval={20} minorTickInterval={10} /> <Geometry startAngle={225} endAngle={315} /> <CircularValueIndicator indentFromCenter={55} color={color} spindleSize={0} spindleGapSize={0} /> </CircularGauge> <LinearGauge value={50 - speedValue * 0.24} id="fuel-gauge" > <LinearSize width={90} height={20} /> <LinearScale startValue={0} endValue={50} tickInterval={25} minorTickInterval={12.5} > <MinorTick visible={true} /> <Label visible={false} /> </LinearScale> <LinearValueIndicator size={8} offset={7} color={color} /> </LinearGauge> </div> &nbsp; <div className="right-section"> <Indicator value={speedValue / 2} inverted={true} startAngle={90} endAngle={0} color={color} /> <Indicator value={speedValue / 2} inverted={false} startAngle={0} endAngle={-90} color={color} /> </div> </div> <Slider value={speedValue} onValueChanged={handleSpeedChange} width={155} min={0} max={200} id="slider" /> </div> ); } export default App;
import React from 'react'; import CircularGauge, { Geometry, Scale, Size, ValueIndicator, } from 'devextreme-react/circular-gauge'; interface IndicatorProps { value: number; inverted: boolean; startAngle: number; endAngle: number; color: string; } export default function Indicator(props: IndicatorProps) { return ( <CircularGauge value={props.value}> <Size width={90} height={90} /> <Scale startValue={props.inverted ? 100 : 0} endValue={props.inverted ? 0 : 100} tickInterval={50} /> <Geometry startAngle={props.startAngle} endAngle={props.endAngle} /> <ValueIndicator color={props.color} /> </CircularGauge> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import CircularGauge, { Geometry, Scale, Size, ValueIndicator, } from 'devextreme-react/circular-gauge'; export default function Indicator(props) { return ( <CircularGauge value={props.value}> <Size width={90} height={90} /> <Scale startValue={props.inverted ? 100 : 0} endValue={props.inverted ? 0 : 100} tickInterval={50} /> <Geometry startAngle={props.startAngle} endAngle={props.endAngle} /> <ValueIndicator color={props.color} /> </CircularGauge> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#gauge-demo { height: 500px; } #gauge-container { text-align: center; margin: 20px auto; background-image: url('../../../../images/Gauges/mask.png'); background-repeat: no-repeat; width: 786px; height: 500px; } #gauge-container > div { display: inline-block; position: relative; } .left-section { top: -20px; left: -40px; } .center-section { top: 25px; } .right-section { top: -20px; right: -40px; } #fuel-gauge { position: absolute; left: 34%; bottom: 5%; } #slider { position: relative; top: -105px; margin: 0 auto; } #slider .dx-slider-bar { background-color: #fff; } #slider .dx-slider-handle { background-color: #f05b41; width: 16px; height: 16px; margin-top: -8px; margin-right: -8px; border-radius: 50%; border: none; } #slider .dx-slider-handle .dx-inkripple-wave { background: none; } #slider .dx-slider-handle::after { background-color: #f05b41; } #slider .dx-slider-range.dx-slider-range-visible { border-color: #f05b41; background-color: #f05b41; }
NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos