diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md
index 26b8942a704e..e3347418beb6 100644
--- a/docs/data/charts/overview/overview.md
+++ b/docs/data/charts/overview/overview.md
@@ -16,7 +16,7 @@ packageName: '@mui/x-charts'
 The `@mui/x-charts` is an MIT library for rendering charts relying on [D3.js](https://d3js.org/) for data manipulation and SVG for rendering.
 And, like other MUI X components, charts are production-ready components that integrate smoothly into your app.
 
-With a high level of customization, MUI X Charts provides on three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition.
+With a high level of customization, MUI X Charts provides three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition.
 Additionally, you can also use all the [MUI System](https://mui.com/system/getting-started/) tools, such as the theme override or the `sx` prop.
 
 {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/modules/components/ChartComponentsGrid.js b/docs/src/modules/components/ChartComponentsGrid.js
index 8fe4df769bc9..c981309f64ca 100644
--- a/docs/src/modules/components/ChartComponentsGrid.js
+++ b/docs/src/modules/components/ChartComponentsGrid.js
@@ -46,13 +46,6 @@ function getComponents() {
       srcDark: '/static/x/component-illustrations/gauge-dark.png',
       href: '/x/react-charts/gauge/',
     },
-    {
-      title: 'Heatmap',
-      srcLight: '/static/x/component-illustrations/heatmap-light.png',
-      srcDark: '/static/x/component-illustrations/heatmap-dark.png',
-      href: '/x/react-charts/heat-map/',
-      planned: true,
-    },
     {
       title: 'Radar Chart',
       srcLight: '/static/x/component-illustrations/radar-light.png',
@@ -68,18 +61,18 @@ function getComponents() {
       planned: true,
     },
     {
-      title: 'Funnel Chart',
-      srcLight: '/static/x/component-illustrations/funnel-light.png',
-      srcDark: '/static/x/component-illustrations/funnel-dark.png',
-      href: '/x/react-charts/funnel/',
+      title: 'Heatmap',
+      srcLight: '/static/x/component-illustrations/heatmap-light.png',
+      srcDark: '/static/x/component-illustrations/heatmap-dark.png',
+      href: '/x/react-charts/heat-map/',
       planned: true,
       pro: true,
     },
     {
-      title: 'Gantt Chart',
-      srcLight: '/static/x/component-illustrations/gantt-light.png',
-      srcDark: '/static/x/component-illustrations/gantt-dark.png',
-      href: '/x/react-charts/gantt/',
+      title: 'Funnel Chart',
+      srcLight: '/static/x/component-illustrations/funnel-light.png',
+      srcDark: '/static/x/component-illustrations/funnel-dark.png',
+      href: '/x/react-charts/funnel/',
       planned: true,
       pro: true,
     },
@@ -91,6 +84,14 @@ function getComponents() {
       planned: true,
       pro: true,
     },
+    {
+      title: 'Gantt Chart',
+      srcLight: '/static/x/component-illustrations/gantt-light.png',
+      srcDark: '/static/x/component-illustrations/gantt-dark.png',
+      href: '/x/react-charts/gantt/',
+      planned: true,
+      pro: true,
+    },
   ];
 }