diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index d74a93cccd24be..92bf49b43365ef 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { alpha } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
@@ -558,6 +558,33 @@ const rowHeaders: Record<string, React.ReactNode> = {
   ),
   'date-picker/simple': <ColumnHead label="Date Picker" />,
   'date-picker/range': <ColumnHead label="Date Range Picker" />,
+
+  // -- charts - components --
+  'charts/line': <ColumnHead label="Line chart" href="/x/react-charts/lines/" />,
+  'charts/bar': <ColumnHead label="Bar chart" href="/x/react-charts/bars/" />,
+  'charts/scatter': <ColumnHead label="Scatter chart" href="/x/react-charts/scatter/" />,
+  'charts/pie': <ColumnHead label="Pie chart" href="/x/react-charts/pie/" />,
+  'charts/sparkline': <ColumnHead label="Sparkline" href="/x/react-charts/sparkline/" />,
+  'charts/gauge': <ColumnHead label="Gauge" href="/x/react-charts/gauge/" />,
+  'charts/treemap': <ColumnHead label="Tree map" href="/x/react-charts/tree-map/" />,
+  'charts/heatmap': <ColumnHead label="Heat map" href="/x/react-charts/heat-map/" />,
+  'charts/radar': <ColumnHead label="Radar" href="/x/react-charts/radar/" />,
+  'charts/funnel': <ColumnHead label="Funnel" href="/x/react-charts/funnel/" />,
+  'charts/sankey': <ColumnHead label="Sankey" href="/x/react-charts/sankey/" />,
+  'charts/gantt': <ColumnHead label="Gantt" href="/x/react-charts/gantt/" />,
+  'charts/gantt-advanced': <ColumnHead label="Advanced Gantt" />,
+  'charts/candlestick': <ColumnHead label="Candlestick" />,
+  'charts/large-dataset': <ColumnHead label="Large dataset with canvas" />,
+  // -- charts - features --
+  'charts/legend': <ColumnHead label="Legend" href="/x/react-charts/legend/" />,
+  'charts/tooltip': <ColumnHead label="Tooltip" href="/x/react-charts/tooltip/" />,
+  'charts/mouse-zoom': <ColumnHead label="Zoom on mouse" />,
+  'charts/export': <ColumnHead label="Export" />,
+  // -- charts - datagrid --
+  'charts/cell-with-charts': <ColumnHead label="Cell with chart" />,
+  'charts/filter-interaction': <ColumnHead label="Row filtering" />,
+  'charts/selection-interaction': <ColumnHead label="Range selection" />,
+
   'mui-x-production': <ColumnHead label="Perpetual use in production" />,
   'mui-x-development': <ColumnHead label="Development license" tooltip="For active development" />,
   'mui-x-development-perpetual': (
@@ -636,6 +663,23 @@ const rowHeaders: Record<string, React.ReactNode> = {
 const yes = <IconImage name="pricing/yes" title="Included" />;
 const pending = <IconImage name="pricing/time" title="Work in progress" />;
 const no = <IconImage name="pricing/no" title="Not included" />;
+const toBeDefined = (
+  <Typography
+    component={Link}
+    href="https://forms.gle/19vN87eBvmXPjBVp6"
+    target="_blank"
+    variant="body2"
+    sx={{
+      '&:hover > svg': { color: 'primary.main', opacity: 1 },
+      fontWeight: 500,
+      pl: '16px',
+    }}
+    title="To be determined"
+  >
+    TBD
+    <LaunchRounded color="primary" sx={{ fontSize: 14, ml: 0.5, opacity: 0, transition: '0.3s' }} />
+  </Typography>
+);
 
 const communityData: Record<string, React.ReactNode> = {
   // MUI Core
@@ -644,11 +688,13 @@ const communityData: Record<string, React.ReactNode> = {
   'Material UI': yes,
   'Joy UI': yes,
   // MUI X
+  // -- data grid - columns --
   'data-grid/column-groups': yes,
   'data-grid/column-spanning': yes,
   'data-grid/column-resizing': no,
   'data-grid/column-reorder': no,
   'data-grid/column-pinning': no,
+  // -- data grid - rows --
   'data-grid/row-height': yes,
   'data-grid/row-spanning': pending,
   'data-grid/row-reordering': no,
@@ -656,6 +702,7 @@ const communityData: Record<string, React.ReactNode> = {
   'data-grid/row-selection': yes,
   'data-grid/row-multiselection': no,
   'data-grid/row-cell-selection': no,
+  // -- data grid - filter --
   'data-grid/filter-quick': yes,
   'data-grid/filter-column': yes,
   'data-grid/header-filters': no,
@@ -664,8 +711,10 @@ const communityData: Record<string, React.ReactNode> = {
   'data-grid/multi-column-sorting': no,
   'data-grid/pagination': yes,
   'data-grid/pagination-large': no,
+  // -- data grid - edit --
   'data-grid/edit-row': yes,
   'data-grid/edit-cell': yes,
+  // -- data grid - export --
   'data-grid/file-csv': yes,
   'data-grid/file-print': yes,
   'data-grid/file-clipboard-copy': yes,
@@ -682,8 +731,38 @@ const communityData: Record<string, React.ReactNode> = {
   'data-grid/accessibility': yes,
   'data-grid/keyboard-nav': yes,
   'data-grid/localization': yes,
+
+  // -- picker --
   'date-picker/simple': yes,
   'date-picker/range': no,
+
+  // -- charts - components --
+  'charts/line': yes,
+  'charts/bar': yes,
+  'charts/scatter': yes,
+  'charts/pie': yes,
+  'charts/sparkline': yes,
+  'charts/gauge': pending,
+  'charts/treemap': pending,
+  'charts/heatmap': pending,
+  'charts/radar': pending,
+  'charts/funnel': no,
+  'charts/sankey': no,
+  'charts/gantt': no,
+  'charts/gantt-advanced': no,
+  'charts/candlestick': no,
+  'charts/large-dataset': no,
+  // -- charts - features --
+  'charts/legend': yes,
+  'charts/tooltip': yes,
+  'charts/mouse-zoom': no,
+  'charts/export': no,
+  // -- charts - datagrid --
+  'charts/cell-with-charts': pending,
+  'charts/filter-interaction': no,
+  'charts/selection-interaction': no,
+
+  // -- general --
   'mui-x-production': yes,
   'mui-x-updates': yes,
   'mui-x-development': yes,
@@ -706,11 +785,13 @@ const proData: Record<string, React.ReactNode> = {
   'Material UI': yes,
   'Joy UI': yes,
   // MUI X
+  // -- data grid - columns --
   'data-grid/column-groups': yes,
   'data-grid/column-spanning': yes,
   'data-grid/column-resizing': yes,
   'data-grid/column-reorder': yes,
   'data-grid/column-pinning': yes,
+  // -- data grid - rows --
   'data-grid/row-height': yes,
   'data-grid/row-spanning': pending,
   'data-grid/row-reordering': yes,
@@ -718,6 +799,7 @@ const proData: Record<string, React.ReactNode> = {
   'data-grid/row-selection': yes,
   'data-grid/row-multiselection': yes,
   'data-grid/row-cell-selection': no,
+  // -- data grid - filter --
   'data-grid/filter-quick': yes,
   'data-grid/filter-column': yes,
   'data-grid/header-filters': yes,
@@ -726,8 +808,10 @@ const proData: Record<string, React.ReactNode> = {
   'data-grid/multi-column-sorting': yes,
   'data-grid/pagination': yes,
   'data-grid/pagination-large': yes,
+  // -- data grid - edit --
   'data-grid/edit-row': yes,
   'data-grid/edit-cell': yes,
+  // -- data grid - export --
   'data-grid/file-csv': yes,
   'data-grid/file-print': yes,
   'data-grid/file-clipboard-copy': yes,
@@ -746,6 +830,34 @@ const proData: Record<string, React.ReactNode> = {
   'data-grid/localization': yes,
   'date-picker/simple': yes,
   'date-picker/range': yes,
+
+  // -- charts - components --
+  'charts/line': yes,
+  'charts/bar': yes,
+  'charts/scatter': yes,
+  'charts/pie': yes,
+  'charts/sparkline': yes,
+  'charts/gauge': pending,
+  'charts/treemap': pending,
+  'charts/heatmap': pending,
+  'charts/radar': pending,
+  'charts/funnel': pending,
+  'charts/sankey': pending,
+  'charts/gantt': pending,
+  'charts/gantt-advanced': no,
+  'charts/candlestick': no,
+  'charts/large-dataset': no,
+  // -- charts - features --
+  'charts/legend': yes,
+  'charts/tooltip': yes,
+  'charts/mouse-zoom': pending,
+  'charts/export': pending,
+  // -- charts - datagrid --
+  'charts/cell-with-charts': pending,
+  'charts/filter-interaction': pending,
+  'charts/selection-interaction': no,
+
+  // -- general --
   'mui-x-production': yes,
   'mui-x-development': <Info value="1 year" />,
   'mui-x-development-perpetual': <Info value="Perpetual" />,
@@ -773,11 +885,13 @@ const premiumData: Record<string, React.ReactNode> = {
   'Material UI': yes,
   'Joy UI': yes,
   // MUI X
+  // -- data grid - columns --
   'data-grid/column-groups': yes,
   'data-grid/column-spanning': yes,
   'data-grid/column-resizing': yes,
   'data-grid/column-reorder': yes,
   'data-grid/column-pinning': yes,
+  // -- data grid - rows --
   'data-grid/row-height': yes,
   'data-grid/row-spanning': pending,
   'data-grid/row-reordering': yes,
@@ -785,6 +899,7 @@ const premiumData: Record<string, React.ReactNode> = {
   'data-grid/row-selection': yes,
   'data-grid/row-multiselection': yes,
   'data-grid/row-cell-selection': yes,
+  // -- data grid - filter --
   'data-grid/filter-quick': yes,
   'data-grid/filter-column': yes,
   'data-grid/header-filters': yes,
@@ -793,8 +908,10 @@ const premiumData: Record<string, React.ReactNode> = {
   'data-grid/multi-column-sorting': yes,
   'data-grid/pagination': yes,
   'data-grid/pagination-large': yes,
+  // -- data grid - edit --
   'data-grid/edit-row': yes,
   'data-grid/edit-cell': yes,
+  // -- data grid - export --
   'data-grid/file-csv': yes,
   'data-grid/file-print': yes,
   'data-grid/file-clipboard-copy': yes,
@@ -813,6 +930,34 @@ const premiumData: Record<string, React.ReactNode> = {
   'data-grid/localization': yes,
   'date-picker/simple': yes,
   'date-picker/range': yes,
+
+  // -- charts - components --
+  'charts/line': yes,
+  'charts/bar': yes,
+  'charts/scatter': yes,
+  'charts/pie': yes,
+  'charts/sparkline': yes,
+  'charts/gauge': pending,
+  'charts/treemap': pending,
+  'charts/heatmap': pending,
+  'charts/radar': pending,
+  'charts/funnel': pending,
+  'charts/sankey': pending,
+  'charts/gantt': pending,
+  'charts/gantt-advanced': toBeDefined,
+  'charts/candlestick': toBeDefined,
+  'charts/large-dataset': toBeDefined,
+  // -- charts - features --
+  'charts/legend': yes,
+  'charts/tooltip': yes,
+  'charts/mouse-zoom': pending,
+  'charts/export': pending,
+  // -- charts - datagrid --
+  'charts/cell-with-charts': pending,
+  'charts/filter-interaction': pending,
+  'charts/selection-interaction': pending,
+
+  // -- general --
   'mui-x-production': yes,
   'mui-x-development': <Info value="1 year" />,
   'mui-x-development-perpetual': <Info value="Perpetual" />,
@@ -1030,6 +1175,22 @@ function PricingTableBuyPremium() {
   );
 }
 
+const StyledCollapse = styled(Collapse, {
+  name: 'MuiSlider',
+  slot: 'Track',
+})(({ theme }) => {
+  return {
+    position: 'relative',
+    marginLeft: theme.spacing(1.5),
+    borderLeftWidth: '2px',
+    borderLeftStyle: 'solid',
+    borderColor: theme.palette.grey[100],
+    ...theme.applyDarkStyles({
+      borderColor: theme.palette.primaryDark[700],
+    }),
+  };
+});
+
 export default function PricingTable({
   columnHeaderHidden,
   plans = ['community', 'pro', 'premium'],
@@ -1040,10 +1201,12 @@ export default function PricingTable({
 }) {
   const router = useRouter();
   const [dataGridCollapsed, setDataGridCollapsed] = React.useState(false);
+  const [chartsCollapsed, setChartsCollapsed] = React.useState(false);
 
   React.useEffect(() => {
     if (router.query['expand-path'] === 'all') {
       setDataGridCollapsed(true);
+      setChartsCollapsed(true);
     }
   }, [router.query]);
 
@@ -1060,16 +1223,24 @@ export default function PricingTable({
     ml: '-14px',
     '&>div:first-of-type': {
       ml: '14px',
+      width: 'calc(100% - 14px)', // avoid overflow on hover transparent background
     },
   };
 
-  const unfoldMore = (
+  const dataGridUnfoldMore = (
     <UnfoldMoreRounded
       fontSize="small"
       sx={{ color: 'grey.600', opacity: dataGridCollapsed ? 0 : 1 }}
     />
   );
 
+  const chartsUnfoldMore = (
+    <UnfoldMoreRounded
+      fontSize="small"
+      sx={{ color: 'grey.600', opacity: chartsCollapsed ? 0 : 1 }}
+    />
+  );
+
   const renderRow = (key: string) => renderMasterRow(key, gridSx, plans);
   const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
 
@@ -1133,11 +1304,13 @@ export default function PricingTable({
         }}
       >
         <Cell />
-        <Cell sx={{ minHeight: 60 }}>{unfoldMore}</Cell>
+        <Cell sx={{ minHeight: 60 }}>{dataGridUnfoldMore}</Cell>
         <Cell highlighted sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
-          {unfoldMore}
+          {dataGridUnfoldMore}
+        </Cell>
+        <Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
+          {dataGridUnfoldMore}
         </Cell>
-        <Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>{unfoldMore}</Cell>
         <Button
           fullWidth
           onClick={() => setDataGridCollapsed((bool) => !bool)}
@@ -1180,20 +1353,7 @@ export default function PricingTable({
           Data Grid
         </Button>
       </Box>
-      <Collapse
-        in={dataGridCollapsed}
-        timeout={700}
-        sx={(theme) => ({
-          position: 'relative',
-          ml: 1.5,
-          borderLeftWidth: '2px',
-          borderLeftStyle: 'solid',
-          borderColor: 'grey.100',
-          ...theme.applyDarkStyles({
-            borderColor: 'primaryDark.700',
-          }),
-        })}
-      >
+      <StyledCollapse in={dataGridCollapsed} timeout={700}>
         <RowCategory>Column features</RowCategory>
         {renderNestedRow('data-grid/column-groups')}
         {divider}
@@ -1280,12 +1440,116 @@ export default function PricingTable({
         {renderNestedRow('data-grid/keyboard-nav')}
         {divider}
         {renderNestedRow('data-grid/localization')}
-      </Collapse>
+      </StyledCollapse>
       {divider}
       {renderRow('date-picker/simple')}
       {divider}
       {renderRow('date-picker/range')}
       {divider}
+      <Box
+        sx={{
+          position: 'relative',
+          minHeight: 58,
+          '& svg': { transition: '0.3s' },
+          '&:hover svg': { color: 'primary.main' },
+          ...gridSx,
+        }}
+      >
+        <Cell />
+        <Cell sx={{ minHeight: 60 }}>{chartsUnfoldMore}</Cell>
+        <Cell highlighted sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
+          {chartsUnfoldMore}
+        </Cell>
+        <Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>{chartsUnfoldMore}</Cell>
+        <Button
+          fullWidth
+          onClick={() => setChartsCollapsed((bool) => !bool)}
+          endIcon={
+            <KeyboardArrowRightRounded
+              color="primary"
+              sx={{
+                transform: chartsCollapsed ? 'rotate(-90deg)' : 'rotate(90deg)',
+              }}
+            />
+          }
+          sx={[
+            (theme) => ({
+              p: 1,
+              py: 1.5,
+              justifyContent: 'flex-start',
+              fontWeight: 400,
+              borderRadius: '0px',
+              color: 'text.primary',
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: '100%',
+              height: '100%',
+              '&:hover': {
+                bgcolor: alpha(theme.palette.primary.main, 0.06),
+                '@media (hover: none)': {
+                  bgcolor: 'initial',
+                },
+              },
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                '&:hover': {
+                  bgcolor: alpha(theme.palette.primary.main, 0.06),
+                },
+              }),
+          ]}
+        >
+          Charts
+        </Button>
+      </Box>
+      <StyledCollapse in={chartsCollapsed} timeout={700}>
+        <RowCategory>Components</RowCategory>
+        {renderNestedRow('charts/line')}
+        {divider}
+        {renderNestedRow('charts/bar')}
+        {divider}
+        {renderNestedRow('charts/scatter')}
+        {divider}
+        {renderNestedRow('charts/pie')}
+        {divider}
+        {renderNestedRow('charts/sparkline')}
+        {divider}
+        {renderNestedRow('charts/gauge')}
+        {divider}
+        {renderNestedRow('charts/treemap')}
+        {divider}
+        {renderNestedRow('charts/radar')}
+        {divider}
+        {renderNestedRow('charts/funnel')}
+        {divider}
+        {renderNestedRow('charts/sankey')}
+        {divider}
+        {renderNestedRow('charts/gantt')}
+        {divider}
+        {renderNestedRow('charts/gantt-advanced')}
+        {divider}
+        {renderNestedRow('charts/candlestick')}
+        {divider}
+        {renderNestedRow('charts/large-dataset')}
+        {divider}
+        <RowCategory>Interactions</RowCategory>
+        {renderNestedRow('charts/legend')}
+        {divider}
+        {renderNestedRow('charts/tooltip')}
+        {divider}
+        {renderNestedRow('charts/mouse-zoom')}
+        {divider}
+        {renderNestedRow('charts/export')}
+        {divider}
+        <RowCategory>Data Grid Integration</RowCategory>
+        {renderNestedRow('charts/cell-with-charts')}
+        {divider}
+        {renderNestedRow('charts/filter-interaction')}
+        {divider}
+        {renderNestedRow('charts/selection-interaction')}
+      </StyledCollapse>
+      {divider}
       {renderRow('mui-x-production')}
       {divider}
       <PricingTableDevelopment renderRow={renderRow} />