[charts] Do not document the usage of DEFAULT_X_AXIS_KEY and DEFAULT_Y_AXIS_KEY

docs/data/charts/axis/AxisCustomizationNoSnap.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
-import { DEFAULT_X_AXIS_KEY } from '@mui/x-charts/constants';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { Chance } from 'chance';
 
@@ -41,7 +40,6 @@ export default function AxisCustomizationNoSnap() {
             ]}
             leftAxis={null}
             bottomAxis={{
-              axisId: DEFAULT_X_AXIS_KEY,
               ...defaultXAxis,
               ...props,
             }}

docs/data/charts/axis/ModifyAxisPosition.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { Chance } from 'chance';
 
@@ -22,8 +21,8 @@ export default function ModifyAxisPosition() {
         {...params}
         leftAxis={null}
         bottomAxis={null}
-        topAxis={DEFAULT_X_AXIS_KEY}
-        rightAxis={DEFAULT_Y_AXIS_KEY}
+        topAxis={{}}
+        rightAxis={{}}
         margin={{ top: 30, bottom: 10 }}
       />
     </Box>

docs/data/charts/axis/ModifyAxisPosition.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { Chance } from 'chance';
 
@@ -22,8 +21,8 @@ export default function ModifyAxisPosition() {
         {...params}
         leftAxis={null}
         bottomAxis={null}
-        topAxis={DEFAULT_X_AXIS_KEY}
-        rightAxis={DEFAULT_Y_AXIS_KEY}
+        topAxis={{}}
+        rightAxis={{}}
         margin={{ top: 30, bottom: 10 }}
       />
     </Box>

docs/data/charts/axis/ModifyAxisPosition.tsx.preview

@@ -2,7 +2,7 @@
   {...params}
   leftAxis={null}
   bottomAxis={null}
-  topAxis={DEFAULT_X_AXIS_KEY}
-  rightAxis={DEFAULT_Y_AXIS_KEY}
+  topAxis={{}}
+  rightAxis={{}}
   margin={{ top: 30, bottom: 10 }}
 />

docs/data/charts/axis/axis.md

@@ -197,7 +197,9 @@ Those pros can accept three type of value:
 
 - `null` to not display the axis
 - `string` which should correspond to the id of a `xAxis` for top and bottom. Or to the id of a `yAxis` for left and right.
-- `object` which will be passed as props to `<XAxis />` or `<YAxis />`. It allows to specify which axis should be represent, and to customize the design of the axis.
+- `object` which will be passed as props to `<XAxis />` or `<YAxis />`. It allows to specify which axis should be represent with the `axisId` property, and to customize the design of the axis.
+
+The demo below uses `leftAxis={null}` to remove the left axis, and `rightAxis={{}}` to set a right axis without overriding the default y-axis configuration.
 
 {{"demo": "ModifyAxisPosition.js"}}
 

docs/data/charts/styling/MarginNoSnap.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 
 const data = ['left', 'right', 'top', 'bottom'].map((propName) => ({
   propName,
@@ -29,13 +28,13 @@ export default function MarginNoSnap() {
             }}
             xAxis={[
               {
-                id: DEFAULT_X_AXIS_KEY,
+                id: 'x-axis',
                 scaleType: 'band',
                 data: ['Page 1', 'Page 2', 'Page 3'],
               },
             ]}
-            topAxis={DEFAULT_X_AXIS_KEY}
-            rightAxis={DEFAULT_Y_AXIS_KEY}
+            topAxis="x-axis"
+            rightAxis={{}}
           />
         </div>
       )}

docs/translations/api-docs/charts/bar-chart/bar-chart.json

@@ -58,10 +58,10 @@
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },
     "xAxis": {
-      "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_X_AXIS_KEY</code>."
+      "description": "The configuration of the x-axes. If not provided, a default axis config is used."
     },
     "yAxis": {
-      "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_Y_AXIS_KEY</code>."
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used."
     }
   },
   "classDescriptions": {},

docs/translations/api-docs/charts/chart-container/chart-container.json

@@ -17,10 +17,10 @@
     },
     "width": { "description": "The width of the chart in px." },
     "xAxis": {
-      "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_X_AXIS_KEY</code>."
+      "description": "The configuration of the x-axes. If not provided, a default axis config is used."
     },
     "yAxis": {
-      "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_Y_AXIS_KEY</code>."
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used."
     }
   },
   "classDescriptions": {}

docs/translations/api-docs/charts/line-chart/line-chart.json

@@ -56,10 +56,10 @@
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },
     "xAxis": {
-      "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_X_AXIS_KEY</code>."
+      "description": "The configuration of the x-axes. If not provided, a default axis config is used."
     },
     "yAxis": {
-      "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_Y_AXIS_KEY</code>."
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used."
     }
   },
   "classDescriptions": {},

docs/translations/api-docs/charts/pie-chart/pie-chart.json

@@ -44,10 +44,10 @@
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },
     "xAxis": {
-      "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_X_AXIS_KEY</code>."
+      "description": "The configuration of the x-axes. If not provided, a default axis config is used."
     },
     "yAxis": {
-      "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_Y_AXIS_KEY</code>."
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used."
     }
   },
   "classDescriptions": {},

docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json

@@ -21,10 +21,10 @@
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },
     "xAxis": {
-      "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_X_AXIS_KEY</code>."
+      "description": "The configuration of the x-axes. If not provided, a default axis config is used."
     },
     "yAxis": {
-      "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_Y_AXIS_KEY</code>."
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used."
     }
   },
   "classDescriptions": {}

docs/translations/api-docs/charts/scatter-chart/scatter-chart.json

@@ -55,10 +55,10 @@
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },
     "xAxis": {
-      "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_X_AXIS_KEY</code>."
+      "description": "The configuration of the x-axes. If not provided, a default axis config is used."
     },
     "yAxis": {
-      "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to <code>DEFAULT_Y_AXIS_KEY</code>."
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used."
     }
   },
   "classDescriptions": {},

packages/x-charts/src/BarChart/BarChart.tsx

@@ -485,7 +485,7 @@ BarChart.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: PropTypes.arrayOf(
     PropTypes.shape({
@@ -555,7 +555,7 @@ BarChart.propTypes = {
   ),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: PropTypes.arrayOf(
     PropTypes.shape({

packages/x-charts/src/ChartContainer/ChartContainer.tsx

@@ -136,7 +136,7 @@ ChartContainer.propTypes = {
   width: PropTypes.number.isRequired,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: PropTypes.arrayOf(
     PropTypes.shape({
@@ -206,7 +206,7 @@ ChartContainer.propTypes = {
   ),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: PropTypes.arrayOf(
     PropTypes.shape({

packages/x-charts/src/ChartsAxis/ChartsAxis.tsx

@@ -50,12 +50,13 @@ export interface ChartsAxisProps {
 
 const getAxisId = (
   propsValue: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps,
+  defaultAxisId?: string,
 ): AxisId | null => {
   if (propsValue == null) {
     return null;
   }
   if (typeof propsValue === 'object') {
-    return propsValue.axisId ?? null;
+    return propsValue.axisId ?? defaultAxisId ?? null;
   }
   return propsValue;
 };
@@ -92,8 +93,8 @@ function ChartsAxis(props: ChartsAxisProps) {
 
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis);
-  const topId = getAxisId(topAxis);
-  const rightId = getAxisId(rightAxis);
+  const topId = getAxisId(topAxis, xAxisIds[0]);
+  const rightId = getAxisId(rightAxis, yAxisIds[0]);
 
   if (topId !== null && !xAxis[topId]) {
     throw Error(

packages/x-charts/src/LineChart/LineChart.tsx

@@ -519,7 +519,7 @@ LineChart.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: PropTypes.arrayOf(
     PropTypes.shape({
@@ -589,7 +589,7 @@ LineChart.propTypes = {
   ),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: PropTypes.arrayOf(
     PropTypes.shape({

packages/x-charts/src/PieChart/PieChart.tsx

@@ -450,7 +450,7 @@ PieChart.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: PropTypes.arrayOf(
     PropTypes.shape({
@@ -520,7 +520,7 @@ PieChart.propTypes = {
   ),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: PropTypes.arrayOf(
     PropTypes.shape({

packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx

@@ -114,7 +114,7 @@ ResponsiveChartContainer.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: PropTypes.arrayOf(
     PropTypes.shape({
@@ -184,7 +184,7 @@ ResponsiveChartContainer.propTypes = {
   ),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: PropTypes.arrayOf(
     PropTypes.shape({

packages/x-charts/src/ScatterChart/ScatterChart.tsx

@@ -445,7 +445,7 @@ ScatterChart.propTypes = {
   width: PropTypes.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: PropTypes.arrayOf(
     PropTypes.shape({
@@ -515,7 +515,7 @@ ScatterChart.propTypes = {
   ),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: PropTypes.arrayOf(
     PropTypes.shape({

packages/x-charts/src/context/CartesianContextProvider.tsx

@@ -32,12 +32,12 @@ import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
 export type CartesianContextProviderProps = {
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis?: MakeOptional<AxisConfig, 'id'>[];
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis?: MakeOptional<AxisConfig, 'id'>[];
   /**