Gauge API

API reference docs for the React Gauge component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Gauge

Import

import { Gauge } from '@mui/x-charts/Gauge';
// or
import { Gauge } from '@mui/x-charts';
// or
import { Gauge } from '@mui/x-charts-pro';
// or
import { Gauge } from '@mui/x-charts-premium';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
cornerRadius	number \| string	0	The radius applied to arc corners (similar to border radius). Set it to '50%' to get rounded arc.
cx	number \| string	-	The x coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area.
cy	number \| string	-	The y coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area.
endAngle	number	360	The end angle (deg).
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
innerRadius	number \| string	'80%'	The radius between circle center and the beginning of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area.
margin	number \| { bottom?: number, left?: number, right?: number, top?: number }	-	The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
outerRadius	number \| string	'100%'	The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
startAngle	number	0	The start angle (deg).
value	number	-	The value of the gauge. Set to `null` to not display a value.
valueMax	number	100	The maximal value of the gauge.
valueMin	number	0	The minimal value of the gauge.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.

The ref is forwarded to the root element.

Theme default props

You can use MuiGauge to change the default props of this component with the theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.MuiGauge-referenceArc	referenceArc	Styles applied to the arc displaying the range of available values.
.MuiGauge-root	root	Styles applied to the root element.
.MuiGauge-valueArc	valueArc	Styles applied to the arc displaying the value.
.MuiGauge-valueText	valueText	Styles applied to the value text.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.