docs

docs/data/charts/gauge/gauge.md

@@ -68,11 +68,11 @@ THe first solution is to add your component as children.
 They will be stacked on top of the default rendering.
 
 ```tsx
-import { Gauge } from '@mui/x-charts/Gauge'
+import { Gauge } from '@mui/x-charts/Gauge';
 
 <Gauge value={25} valueMax={50}>
   <AddedElement />
-</Gauge>
+</Gauge>;
 ```
 
 ### Using the Gauge container
@@ -84,13 +84,18 @@ The second solution is to start from scratch with our components:
 - GaugeValueText
 
 ```tsx
-import { GaugeContainer, Gauge , GaugeReferenceArc, GaugeValueArc } from '@mui/x-charts/Gauge'
+import {
+  GaugeContainer,
+  Gauge,
+  GaugeReferenceArc,
+  GaugeValueArc,
+} from '@mui/x-charts/Gauge';
 
 <GaugeContainer value={25} valueMax={50}>
   <GaugeReferenceArc />
   <GaugeValueArc />
   <AddedElement />
-</GaugeContainer>
+</GaugeContainer>;
 ```
 
 ### Creating your components

docs/data/pages.ts

@@ -407,6 +407,7 @@ const pages: MuiPage[] = [
               { pathname: '/x/react-charts/bar-demo', title: 'Demos' },
             ],
           },
+          { pathname: '/x/react-charts/gauge', title: 'Gauge' },
           {
             pathname: '/x/react-charts-lines',
             title: 'Lines',
@@ -458,7 +459,6 @@ const pages: MuiPage[] = [
             pathname: '/x/react-charts-future',
             subheader: 'Future components',
             children: [
-              { pathname: '/x/react-charts/gauge', title: 'Gauge', planned: true },
               { pathname: '/x/react-charts/heat-map', title: 'Heat map', planned: true },
               { pathname: '/x/react-charts/radar', title: 'Radar', planned: true },
               { pathname: '/x/react-charts/tree-map', title: 'Treemap', planned: true },

docs/src/modules/components/ChartComponentsGrid.js

@@ -38,6 +38,12 @@ function components() {
       srcDark: '/static/x/component-illustrations/sparkline-dark.png',
       href: '/x/react-charts/sparkline/',
     },
+    // {
+    //   title: 'Gauge',
+    //   srcLight: '/static/x/component-illustrations/gauge-light.png',
+    //   srcDark: '/static/x/component-illustrations/gauge-dark.png',
+    //   href: '/x/react-charts/gauge/',
+    // },
   ];
 }