Skip to content

GaugeContainer API

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

Demos

Import

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

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

Props

NameTypeDefaultDescription
cornerRadiusnumber
| string
0

The radius applied to arc corners (similar to border radius). Set it to '50%' to get rounded arc.

cxnumber
| 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.

cynumber
| 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.

disableAxisListenerboolfalse

If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.

endAnglenumber360

The end angle (deg).

heightnumber-

The height of the chart in px. If not defined, it takes the height of the parent element.

innerRadiusnumber
| 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{ bottom?: number, left?: number, right?: number, top?: number }object Depends on the charts type.

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 an object with the optional properties: top, bottom, left, and right.

outerRadiusnumber
| 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.

startAnglenumber0

The start angle (deg).

valuenumber-

The value of the gauge. Set to null to not display a value.

valueMaxnumber100

The maximal value of the gauge.

valueMinnumber0

The minimal value of the gauge.

widthnumber-

The width of the chart in px. If not defined, it takes the width of the parent element.

The component cannot hold a ref.