docs

docs/data/charts/gauge/BasicGauges.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Gauge } from '@mui/x-charts/Gauge';
+
+export default function BasicGauges() {
+  return (
+    <React.Fragment>
+      <Gauge value={60} />
+      <Gauge value={60} startAngle={-90} endAngle={90} />
+    </React.Fragment>
+  );
+}

docs/data/charts/gauge/BasicGauges.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Gauge } from '@mui/x-charts/Gauge';
+
+export default function BasicGauges() {
+  return (
+    <React.Fragment>
+      <Gauge value={60} />
+      <Gauge value={60} startAngle={-90} endAngle={90} />
+    </React.Fragment>
+  );
+}

docs/data/charts/gauge/BasicGauges.tsx.preview

@@ -0,0 +1,4 @@
+<React.Fragment>
+  <Gauge value={60} />
+  <Gauge value={60} startAngle={-90} endAngle={90} />
+</React.Fragment>

docs/data/charts/gauge/GaugeValueRangeNoSnap.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Gauge } from '@mui/x-charts/Gauge';
+
+export default function GaugeValueRangeNoSnap() {
+  return (
+    <React.Fragment>
+      <Gauge value={50} />
+      <Gauge value={50} valueMin={10} valueMax={60} />
+    </React.Fragment>
+  );
+}

docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Gauge } from '@mui/x-charts/Gauge';
+
+export default function GaugeValueRangeNoSnap() {
+  return (
+    <React.Fragment>
+      <Gauge value={50} />
+      <Gauge value={50} valueMin={10} valueMax={60} />
+    </React.Fragment>
+  );
+}

docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview

@@ -0,0 +1,4 @@
+<React.Fragment>
+  <Gauge value={50} />
+  <Gauge value={50} valueMin={10} valueMax={60} />
+</React.Fragment>

docs/data/charts/gauge/PlaygroundNoSnap.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import Paper from '@mui/material/Paper';
+import { Gauge } from '@mui/x-charts/Gauge';
+
+export default function PlaygroundNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Gauge"
+      data={[
+        {
+          propName: `value`,
+          knob: 'number',
+          defaultValue: 75,
+          step: 1,
+          min: 0,
+          max: 100,
+        },
+        {
+          propName: `startAngle`,
+          knob: 'number',
+          defaultValue: 0,
+          step: 1,
+          min: -360,
+          max: 360,
+        },
+        {
+          propName: `endAngle`,
+          knob: 'number',
+          defaultValue: 360,
+          step: 1,
+          min: -360,
+          max: 360,
+        },
+        {
+          propName: `innerRadius`,
+          knob: 'number',
+          defaultValue: 80,
+          step: 1,
+          min: 0,
+          max: 100,
+        },
+        {
+          propName: `outerRadius`,
+          knob: 'number',
+          defaultValue: 100,
+          step: 1,
+          min: 0,
+          max: 100,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Paper
+          sx={{
+            width: 200,
+            height: 200,
+          }}
+        >
+          <Gauge
+            margin={{ top: 5 }}
+            {...props}
+            innerRadius={`${props.innerRadius}%`}
+            outerRadius={`${props.outerRadius}%`}
+          />
+        </Paper>
+      )}
+      getCode={({ props }) => {
+        const { innerRadius, outerRadius, ...numberProps } = props;
+        return [
+          `import { Gauge } from '@mui/x-charts/Gauge';`,
+          '',
+          `<Gauge`,
+          `  // ...`,
+          ...Object.entries(numberProps).map(
+            ([name, value]) => `  ${name}={${value}}`,
+          ),
+          ...Object.entries({ innerRadius, outerRadius }).map(
+            ([name, value]) => `  ${name}="${value}%"`,
+          ),
+          '/>',
+        ].join('\n');
+      }}
+    />
+  );
+}

docs/data/charts/gauge/gauge.md

@@ -1,15 +1,69 @@
 ---
 title: React Gauge chart
 productId: x-charts
+components: Gauge, GaugeContainer
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/meter/
 ---
 
-# Charts - Gauge 🚧
+# Charts - Gauge
 
 <p class="description">Gauge charts let the user evaluate metrics.</p>
 
-:::warning
-The Gauge Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/2903) to see it arrive sooner.
+## Basic gauge
 
-Don't hesitate to leave a comment there to influence what gets built.
-Especially if you already have a use case for this component, or if you're facing a pain point with your current solution.
+The Gauge display a numeric value that varies within a defined range.
+
+{{"demo": "BasicGauges.js"}}
+
+## Value range
+
+The value of the Gauge is provided by props `value`.
+
+By default it's assumed to be between 0 and 100.
+You can modify this range with props `valueMin` and `valueMax`.
+
+{{"demo": "GaugeValueRangeNoSnap.js"}}
+
+## Arcs configuration
+
+You can modify the arc shape with the following props:
+
+- `startAngle`, `endAngle`: Angle range provided in degrees
+- `innerRadius`, `outerRadius`: Radius of the arc. It can be a number for fix number of px. Or a percentage string which will be a percent of the maximal available radius.
+- `cornerRadius`: It can be a number for fix number of px. Or a percentage string which will be a percent of distance between inner and outer radius.
+
+{{"demo": "PlaygroundNoSnap.js"}}
+
+:::info
+Notice that the arc position is computed to let the Gauge take as much space as possible in the drawing area.
+
+Provide props `cx` and/or `cy` to fix the coordinate of the arc center.
 :::
+
+## Accessibility
+
+(WAI-ARIA: [https://www.w3.org/WAI/ARIA/apg/patterns/meter/](https://www.w3.org/WAI/ARIA/apg/patterns/meter/))
+
+### Label
+
+If a visible label is available, reference it by adding `aria-labelledby` attribute.
+Otherwise, the label can be provided by `aria-label`.
+
+### Presentation
+
+Assistive technologies often present the value as a percentage.
+This can be modified by providing `aria-valuetext` attribute.
+
+For example a battery level indicator is better with a duration in hours.
+
+```jsx
+<h3 id="battery_level_label">
+  Battery level
+</h3>
+<Gauge
+  value={6}
+  valueMax={12}
+  aria-labelledby="battery_level_label"
+  aria-valuetext="50% (6 hours) remaining"
+/>
+```